HTML5 canvas 入门

本文同步于个人博客：https://zhoushuo.me/blog/2018/03/05/html5-canvas/

<canvas> 是HTML5新增的元素，可以用于绘制图形，制作照片，创建动画。<canvas> 标签只是图形容器，它没有自己的行为，必须使用脚本来绘制图形。

创建一个canvas

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

<canvas> 标签只有两个属性—— width和height，当没有设置宽度和高度的时候，<canvas> 的默认大小为300px×150px。需要注意的是，如果使用css来定义<canvas>的大小，在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

渲染上下文

<canvas>元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

<canvas>创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。

canvas起初是空白的，首先需要找到渲染上下文，然后在它的上面绘制。

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

<canvas> 有一个叫做 getContext()的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，就是上下文的格式。

检查浏览器兼容性

最新版的 FireFox，Safari，Chrome 和 Opera 都支持 HTML5 canvas，但是 IE8及以下都不支持canvas。下面的代码用于检测浏览器的是否支持canvas

var canvas = document.getElementById(‘mycanvas‘); 

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

canvas 坐标

在绘制图形之前，我们还应该先了解一下canvas中的坐标。canvas默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。

绘制 canvas 图形

好的，接下来我们就开始了解怎么使用Canvas的API绘制基本图形了。

var canvas = document.getElementById(‘mycanvas‘); 

if (canvas.getContext){
    var ctx = canvas.getContext(‘2d‘);
    ctx.fillStyle="red";
    ctx.fillRect(0,0,100,100);
}

上面的两行代码绘制一个红色的矩形：

设置fillStyle属性可以是css颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。

fillRect(x,y,width,height)方法定义了矩形当前的填充方式，x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。

canvas 路径

路径是通过线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。
以下是所要用到的方法：

函数	描述
`strokeStyle`	用于设置画笔绘制路径的颜色、渐变和模式
`lineWidth`	定义绘制线条的宽度
`beginPath()`	开始一个新的绘制路径
`moveTo(x,y)`	移动画笔到指定的坐标点(x,y)，该点就是新的子路径的起始点
`lineTo(x,y)`	使用直线边接当前端点和指定的坐标点(x,y)
`stroke()`	沿着绘制路径的坐标点顺序绘制直线
`closePath()`	如果当前的绘制路径是打开的，则关闭掉该绘制路径

这里需要注意的是，当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

下面的代码绘制了一个三角形：

function draw() {
 var canvas = document.getElementById(‘canvas‘);
     if (canvas.getContext){
        var ctx = canvas.getContext(‘2d‘);
        ctx.beginPath();
        ctx.moveTo(75,50);
        ctx.lineTo(100,75);
        ctx.lineTo(100,25);
        ctx.fill();
    }
}

canvas 圆弧

绘制路径我们可以使用arc()方法。该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。

canvas 文本

canvas 提供了两种方法来渲染文本：

fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的。

strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的。
文本被填充方式：

var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

文本边框备绘制方式：

var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.font="30px Arial";
ctx.strkeText("Hello World",10,50);

canvas 图像

引入图像到canvas里需要以下两步基本操作：

获取一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片。
使用drawImage()函数将图片绘制到画布上。

获取图片和绘制图片，下面只展示最简单的一种：

var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
var img=document.getElementById("img");
ctx.drawImage(img,10,10);

drawImage有三个参数：drawImage(image, x, y)。其中image是image或者 canvas对象，x和y是其在目标canvas里的起始坐标。