本文同步于个人博客：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 途径

途径是经由过程线段或曲线相连构成的差别外形的点的鸠合。一个途径，以至一个子途径，都是闭合的。运用途径绘制图形须要一些分外的步骤。
以下是所要用到的要领：

这里须要注重的是，当你挪用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里须要以下两步基础操纵：

1. 猎取一个指向HTMLImageElement的对象或许另一个canvas元素的援用作为源，也能够经由过程供应一个URL的体式格局来运用图片。
2. 运用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里的肇端坐标。