理解canvas元素，绘制简单2D绘图形

一、canvas 简介

图形和动画已经日益成为浏览器中现代 Web 应用程序的必备功能，但实现起来仍然比较困难，既要兼顾美观又不能拖慢浏览器。目前已经有一套日趋完善的 APT 和工具可以用来开发此类功能。

毋庸置疑，<canvas>是 HTML5 最受欢迎的新特性。Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域动态在上面绘制图片，类似于其他通用的二维 API，通过一套完整的绘图函数来动态生成图形。<canvas>最早是苹果公司提出并准备用在控制面板中的，随着其他浏览器的迅速跟进，HTML5 将其纳入标准。目前所有主流浏览器都在某种程度上支持<canvas>元素。

二、Canvas基本使用

2.1 <canvas> 元素

创建<canvas>元素时至少要设置其 width 和 height 属性，这样才能告诉浏览器在多大面积上绘图。出现在开始和结束标签之间的内容是后备数据，会在浏览器不支持<canvas>元素时显示。比如:

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>

与其他元素一样，width 和 height 属性也可以在 DOM 节点上设置，因此可以随时修改。整个元素还可以通过 CSS 添加样式，并且元素在添加样式或实际绘制内容前是不可见的。

要在画布上绘制图形，首先要取得绘图上下文。使用 getcontext ()方法可以获取对绘图上下文的引用。对于平面图形，需要给这个方法传入参数“2d"，表示要获取 2D 上下文对象：

let drawing = document.getElementById("drawing");

// 确保浏览器支持<canvas>

if(drawing.getContext){

    let context = drawing.getContext("2d");

    // 其他代码

}

使用<canvas>元素时，最好先测试一下 getContext()方法是否存在。有些浏览器对 HTML 规范中没有的元素会创建默认 HTML 元素对象。这就意味着即使 drawing 包含一个有效的元素引用，getContext ()方法也未必存在。

可以使用 toDatauRL()方法导出<canvas>元素上的图像。这个方法接收一个参数：要生成图像的MIME 类型（与用来创建图形的上下文无关）。例如，要从画布上导出一张 PNG格式的图片，可以这样做：

let drawing = document.getElementById("drawing");

// 确保浏览器支持<canvas>

if (drawing.getContext){

    // 取得图像的数据 URI

    let imgURI = drawing.toDataURL("image/png");

    // 显示图片

    let image = document.createElement("img");

    image.src = imgURI;

    document.body.appendChild(image)；

}

浏览器默认将图像编码为 PNG 格式，除非另行指定。Firefox 和 Opera还支持传人"image/jpeg"，进行 JPEG 编码。因为这个方法是后来才增加到规范中的，所以支持的浏览器也是在后面的版本实现的，包括 IE9、Firefox 3.5 和 Opera 10。

2.2 一个简单的例子

以下实例绘制两个长方形：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas入门</title>
<style type="text/css">
canvas {
    border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="tutorial" width="300" height="300"></canvas>
<script type="text/javascript">
function draw(){
    var canvas = document.getElementById('tutorial');
    if(!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(200,0,0)";
      //绘制矩形
    ctx.fillRect (10, 10, 55, 50);
 
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
}
draw();
</script>
</body>
</html>

运行结果：

三、绘制形状

3.1 栅格 (grid) 和坐标空间

如下图所示，canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。栅格的起点为左上角，坐标为 (0,0) 。所有元素的位置都相对于原点来定位。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，坐标为 (x,y)。

后面我们会涉及到坐标原点的平移、网格的旋转以及缩放等。