HTML5 Canvas绘制图形从入门到精通

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

一、canvas 简介

<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。

Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 <canvas>, Internet Explorer 从 IE9 开始 <canvas> 。Chrome 和 Opera 9+ 也支持 <canvas>。

二、Canvas基本使用

<canvas id="tutorial" width="300" height="300"></canvas>

2.1 `<canvas>` 元素

<canvas> 看起来和 <img> 标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。

如果不给 <canvas> 设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 <canvas> 的宽高。

替换内容

由于某些较老的浏览器（尤其是 IE9 之前的 IE 浏览器）或者浏览器不支持 HTML 元素 <canvas>，在这些浏览器上你应该总是能展示替代内容。

支持 <canvas> 的浏览器会只渲染 <canvas> 标签，而忽略其中的替代内容。不支持 <canvas> 的浏览器则会直接渲染替代内容。

用文本替换：

<canvas>

    你的浏览器不支持 canvas，请升级你的浏览器。

</canvas>

用 <img> 替换：

<canvas>

    <img decoding="async" src="./美女.jpg" alt="">

</canvas>

结束标签 </canvas> 不可省略。

与 <img> 元素不同，<canvas> 元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

2.2 渲染上下文(Thre Rending Context)

<canvas> 会创建一个固定大小的画布，会公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容。

我们重点研究 2D 渲染上下文。其他的上下文我们暂不研究，比如， WebGL 使用了基于 OpenGL ES的3D 上下文 ("experimental-webgl") 。

var canvas = document.getElementById('tutorial');

//获得 2d 上下文对象

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

2.3 检测支持性

var canvas = document.getElementById('tutorial');



if (canvas.getContext){

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

  // drawing code here

} else {

  // canvas-unsupported code here

}

2.4 一个简单的例子

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

<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>

三、绘制形状

3.1 栅格 `(grid)` 和坐标空间

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

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

3.2 绘制矩形

<canvas> 只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径 (path)。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

canvast 提供了三种方法绘制矩形：

1、fillRect(x, y, width, height)：绘制一个填充的矩形。
2、strokeRect(x, y, width, height)：绘制一个矩形的边框。
3、clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。

说明：这 3 个方法具有相同的参数。

x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)
width, height：指的是绘制的矩形的宽和高。

function draw(){ var canvas = document.getElementById('tutorial'); 
if(!canvas.getContext) return;
 var ctx = canvas.getContext("2d"); 
ctx.fillRect(10, 10, 100, 50); // 绘制矩形，填充的默认颜色为黑色
 ctx.strokeRect(10, 70, 100, 50); // 绘制矩形边框 } draw();

ctx.clearRect(15, 15, 50, 25);

四、绘制路径 (`path`)

图形的基本元素是路径。

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

一个路径，甚至一个子路径，都是闭合的。

使用路径绘制图形需要一些额外的步骤：

创建路径起始点
调用绘制方法去绘制出路径
把路径封闭
一旦路径生成，通过描边或填充路径区域来渲染图形。

下面是需要用到的方法：

beginPath()

新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
moveTo(x, y)

把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
closePath()

闭合路径之后，图形绘制命令又重新指向到上下文中
stroke()

通过线条来绘制图形轮廓
fill()

通过填充路径的内容区域生成实心的图形

4.1 绘制线段

function draw(){

    var canvas = document.getElementById('tutorial');

    if (!canvas.getContext) return;

    var ctx = canvas.getContext("2d");

    ctx.beginPath(); //新建一条path

    ctx.moveTo(50, 50); //把画笔移动到指定的坐标

    ctx.lineTo(200, 50);  //绘制一条从当前位置到指定坐标(200, 50)的直线.

    //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做

    ctx.closePath();

    ctx.stroke(); //绘制路径。

}

draw();

4.2 绘制三角形边框

function draw(){

    var canvas = document.getElementById('tutorial');

    if (!canvas.getContext) return;

    var ctx = canvas.getContext("2d");

    ctx.beginPath();

    ctx.moveTo(50, 50);

    ctx.lineTo(200, 50);

    ctx.lineTo(200, 200);

      ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形

    ctx.stroke(); //描边。stroke不会自动closePath()

}

draw();

4.3 填充三角形

function draw(){

    var canvas = document.getElementById('tutorial');

    if (!canvas.getContext) return;

    var ctx = canvas.getContext("2d");

    ctx.beginPath();

    ctx.moveTo(50, 50);

    ctx.lineTo(200, 50);

    ctx.lineTo(200, 200);

    

    ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。

}

draw();