如何使用HTML canvas来画图

时间 2019-11-21

标签如何使用 html canvas 画图栏目 HTML 繁體版

原文原文链接

将canvas添加到HTML中

<canvas>标签自身只有两个属性: width, height. 两者在没有指定的时候（标签内指定或者CSS指定）分别默认为300 pixels和150 pixels.javascript

固然除此以外，canvas还有一个HTML的全局属性——id属性.html

<!DOCTYPE html>  <!--说明这是一个html页面-->

<html lang="en">  <!--指明语言，zh中文，fr法语，de德语，it意大利语，ja日语，ko韩语-->
    <head>
        <meta charset="UTF-8">  <!--说明字符编码模式，放在head中-->
        <script type="text/javascript" src="xxxx"></script>  <!--建议将javascript插入到head中-->
        <title>page_name</title>
    </head>
    <body>
        <canvas id="mycanvas" width="500" height="500">浏览器不支持canvas</canvas>
    </body>
</html>

书写canvas标签还有一点切记：canvas的结束标签不能够省略！java

canvas的支持性

并非每一个浏览器都支持canvas标签，除了要检查浏览器的支持性外，还要设置好在不支持状况下canvas标签的替换内容（用以提示用户信息或者干脆建议用户将浏览器升级到最新版本）web

<canvas id="mycanvas1" width="150" width="150">
    <!--这里的图片就是在浏览器不支持canvas的时候的替换内容-->
    <img src="..." width="150" height="150" alt=""/>  
</canvas>

下面是如何经过Javascript来检测浏览器是否支持canvas标签.canvas

if(canvas.getContext){
    var ctx = canvas.getContext('2d');
    //continue drawing
}else{
    //canvas-unsupported code here
}

最后的准备工做

准备工做到这里尚未结束，还必须使用 getContext(contextId) 来获取canvas标签的渲染上下文，经过这个上下文方能够调用各类绘画函数.咱们不妨将渲染上下文想象成一个画笔，只有得到画笔咱们才能进行绘画.浏览器

这里的contextId有两种取值："2d"和"experimental-webgl". 平时我暂且使用前者就行了，它会返回一个CanvasRenderingContext2D对象.函数

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

开始绘画

canvas就是一个画布，标签的大小就是画布的大小。咱们经过坐标来定位并在这张画布上绘画。绘画以前canvas是空的，画布以左上角为原点（0,0），向右和向下为正方向。字体

绘画以前，先蘸取画笔的颜色.webgl

//蘸取画刷颜色
context.fillStyle = "#ffffaa";

而后即可以进行绘画.编码

最简单的绘画从画文本开始，没错，咱们把文字的当作最简单的图形.

//设置字体
context.font = "20px Sans-Serif";
//画一个文本
context.fillText("Hello World!", 195, 190);

在canvas中只有一种图形咱们能够直接经过调用函数就能够绘画出来，那就是矩形。这也就意味着，其他全部的图形，咱们都须要经过绘制路径来拼成咱们想要的图形，诸如三角形、梯形等等.

fillRect(x, y, width, height) 绘画实心矩形

strokeRect(x, y, width, height) 绘画空心矩形

clearRect(x, y, width, height) 擦除矩形范围内的全部的像素点

//画一个矩形
context.fillRect(0, 0, 500, 300);
//画一个文本
context.fillText("Hello World!", 195, 190);

//设置字体
context.font = "20px Sans-Serif";

//设置字体的垂直对齐方式
context.textBaseline = "top";

控制台输出信息

console.log(message);