1. canvas简介
Canvas是HTML5的一个特性，它允许我们使用JavaScript来绘制图像。Canvas可以作为一个没有固定大小的绘图区域，可以用来制作简单的图表、游戏动画等。一个画布（canvas）是一个关注形状的矩形区域，通过JavaScript脚本对画布区域进行控制达到绘图的效果。在HTML标记中，只需要简单的使用canvas标签，并指定画布的宽度和高度即可。
<canvas id="myCanvas" width="200" height="100">
您的浏览器不支持canvas标签
</canvas>
该标签中id属性指定canvas元素的唯一标识符。在JavaScript中，我们需要获得这个canvas元素的引用才能进行绘图操作。width和height属性定义了画布的大小。当这两个属性不指定时，默认大小为300px × 150px。如下所示：
var canvas = document.getElementById("myCanvas"); // 获得canvas元素的引用
var ctx = canvas.getContext("2d"); // 获取2D绘图上下文环境对象
2. canvas绘图基础
2.1 绘制形状
我们可以利用canvas绘图上下文对象，通过各种属性设置和方法实现对图形的绘制。例如，可以通过fillStyle属性设置填充颜色，通过strokeStyle属性设置边框颜色。
利用canvas，我们可以绘制简单的基本图形，比如：线段、矩形、圆形、弧形等。
例如，我们可以用rect()方法绘制一个矩形：
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
上述代码表示：将颜色设置为红色，并绘制一个从 (10, 10) 起始的50px x 50px的矩形。如果只是想描边而不填充颜色，则可以使用strokeRect()方法。
利用beginPath()方法可以开始绘制更为复杂的图形。例如，我们可以绘制一个三角形：
ctx.beginPath(); // 开始路径
ctx.moveTo(50, 10); // 将画笔定位到(50, 10)
ctx.lineTo(10, 70); // 连接(10, 70)
ctx.lineTo(90, 70); // 连接(90, 70)
ctx.closePath(); // 缩放路径
ctx.stroke(); // 描绘图形边框
上述代码表示：使用beginPath()开启路径，然后使用moveTo()将画笔移动到(50, 10)，接着使用lineTo()将它与(10, 70)、(90, 70)三点连接。最后通过closePath()方法将图形封闭，使用stroke()描绘边框。
2.2 绘制文本
我们可以利用fillText()或strokeText()方法将文本绘制在canvas上。
例如，我们可以将Hello World写入canvas中：
ctx.font = "30px Arial"; // 设置字体大小和类型
ctx.fillStyle = "#008000"; // 设置填充颜色
ctx.fillText("Hello World", 10, 50); // 绘制文本
上述代码表示：将字体设置为30像素Arial字体，将颜色设置为绿色，然后绘制Hello World文本，起始位置坐标为(10, 50)。
2.3 控制透明度
使用globalAlpha属性可以控制canvas上图形的透明度，取值范围为0.0（完全透明）到1.0（完全不透明）。
ctx.globalAlpha = 0.5; // 设置透明度为50%
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
上述代码表示：将透明度设置为50%，将颜色设置为红色，绘制一个50px x 50px的矩形。
3. canvas受哪些参数影响
3.1 canvas占用的空间大小
canvas所占的空间大小会影响图形的绘制。可通过设置width和height属性来控制canvas的大小。
canvas {
width: 100%;
height: 500px;
}
上述代码表示：使canvas元素的宽度为100%、高度为500px。
3.2 canvas绘制的图形大小
canvas绘制的图形的大小和位置取决于绘制时使用的坐标。例如，如果绘制一个宽度为50px、高度为50px的矩形，若起始位置坐标为（10,10），则该矩形将从$(10,10)$开始绘制，绘制的大小为$50 \times 50$。如果起始位置坐标为（50,50），则在canvas上画布上将绘制从$(50,50)$开始的$50 \times 50$的矩形。
3.3 canvas上绘制的图形属性
canvas上绘制的图形的颜色、透明度、线条宽度等属性都会影响绘制效果。
例如，可以使用fillStyle设置填充颜色、使用strokeWidth设置线条宽度：
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
ctx.lineWidth = 5;
ctx.strokeStyle = "blue";
ctx.strokeRect(10, 10, 50, 50);
上述代码表示：使用红色填充颜色，绘制一个从 $(10,10)$ 开始，大小为 $50 \times 50$ 的矩形，接着设置线条的宽度为5，颜色为蓝色，描绘一个从 $(10,10)$ 开始，大小为 $50 \times 50$ 的矩形的边框。
3.4 绘图的方法与参数
绘制不同种类的图形时，绘制方法会影响图形的渲染效果。方法的参数也会影响绘制效果。
例如，我们可以用quadraticCurveTo()方法绘制一条二次曲线：
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(60, 40, 100, 20);
ctx.stroke();
上述代码表示：使用beginPath()开启路径，使用moveTo()方法将画笔移动到(20, 20)，然后使用quadraticCurveTo()方法，绘制一个控制点为(60, 40)，结束点为(100, 20)的二次曲线，最后通过stroke()方法描绘边框。
3.5 canvas上绘图的顺序
canvas绘图的顺序也会影响绘制效果，后绘制的图形可能会覆盖前面绘制的图形。
如下代码，在fillText()方法之后，我们通过stroke()方法绘制了一个矩形，该矩形会覆盖文本：
ctx.font = "30px Arial";
ctx.fillStyle = "black";
ctx.fillText("Hello World", 10, 50);
ctx.lineWidth = 5;
ctx.strokeStyle = "blue";
ctx.strokeRect(10, 10, 50, 50);
上述代码表示：使用30像素大小的Arial字体绘制Hello World文本，颜色为黑色，起始位置坐标为(10, 50)。然后根据stroke()方法将位置坐标为(10, 10)、大小为$50 \times 50$的矩形绘制在文本之前。
3.6 坐标系的设置
在canvas绘制时，坐标系的原点和单位长度会影响绘制效果。
例如，可以使用translate()方法将坐标系进行平移，使用scale()方法进行缩放：
ctx.translate(50, 50); // 将坐标系平移50个单位
ctx.scale(2, 2); // 将坐标系进行2倍缩放
上述代码表示：将坐标系平移50个单位，起始坐标从(0,0)变为(50, 50)，再将坐标系进行2倍缩放，绘制的图形也会相应的缩放2倍。
3.7 动画的绘制速度
在动画绘制中，绘制速度会影响动画效果。
在使用requestAnimationFrame()方法绘制动画时，我们可以通过控制递归调用的速度来控制动画的绘制速度：
function draw() {
// 绘制动画
requestAnimationFrame(draw); // 动画每秒60帧
}
draw();
上述代码表示：使用requestAnimationFrame()方法，每秒绘制60帧动画。
3.8 图片的质量
在将图片绘制到canvas上时，绘制质量会影响绘制效果。可以使用imageSmoothingEnabled属性来设置图片的质量。
ctx.imageSmoothingEnabled = false; // 关闭图像平滑处理
ctx.drawImage(img, x, y);
上述代码表示：关闭图像平滑处理，将img图片绘制到坐标为(x, y)的位置。
3.9 canvas的清除
下面是两种清除canvas中内容的方法：
使用clearRect()方法清除canvas中的矩形区域：
ctx.clearRect(left,top,width,height);
使用width和height属性重新设置canvas的大小来清空canvas中的内容：
canvas.width = canvas.width;