1. canvas对象概述
canvas是HTML5新增的画布元素。它是一种使用JavaScript API在网页上绘制图形的方法，可以绘制图形、动画、游戏等效果，可替代以前使用Flash的方式，同时增强了用户体验。
canvas元素默认情况下没有任何绘制。它只是允许您添加绘制环境的容器。要在canvas上进行绘制，您需要使用JavaScript来获取绘制上下文。canvas只有2D上下文和3D上下文，我们这里只说2D上下文。
2. 获取canvas绘图上下文
canvas的API基于上下文环境，因为在canvas上绘制而不是标准的 HTML 绘图，所以它可以使用JavaScript来完成。我们接下来看如何获取canvas的绘图上下文。
2.1 获取2D绘图上下文
要绘制2D图形，在canvas上创建一个2D画布上下文是必须的，该上下文定义了在画布上绘制的路径、形状、样式和文本的API。创建画布上下文有两种方法：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
这里使用了canvas的2D Context，即"2d"，通过getElementById()方法获取到canvas元素，并通过getContext()方法来获取2D上下文，如果你的id不是"myCanvas"，那么就将其替换成您的canvas元素的id。
2.2 获取3D绘图上下文
要使用3D绘制需要使用WebGL，WebGL（WebGL即“Web图形库”，全称为：Web Graphics Library）是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API集合，为HTML5 Canvas提供了3D绘制功能。
要获取3D绘图上下文，可以使用WebGL上下文，API如下：
var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl");
这里使用的是CanvasWebGLRenderngContext，即 "webgl"，也可以使用 "experimental-webgl"
3. Canvas API
canvas标签提供了大量的API，允许我们使用JavaScript绘制任何类型的图形，比如：直线、矩形、圆形、字符、图像等等，还可以使用各种样式和颜色、渐变、阴影等特效来制作更酷炫的效果，下面我们具体看一下canvas提供的API。
3.1 绘制基本图形
canvas API允许我们绘制直线、矩形、圆形、字符、图像等等基本图形，下面我们来看一下这些API的使用。
3.1.1 绘制直线
绘制直线是canvas API中最基本的操作之一，可以使用canvas对象的stroke()函数来绘制直线。代码实现如下所示：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0，0);
ctx.lineTo(200，100);
ctx.stroke();
以上代码中，首先通过getElementById方法获取canvas元素，再通过getContext("2d")获取canvas绘制上下文，之后使用beginPath()函数开始路径，使用moveTo()函数设置起点，使用lineTo()函数设置终点，最后使用stroke()函数将路径进行描边。
3.1.2 绘制矩形
绘制矩形同样是canvas API中基本操作之一，可以使用canvas对象的rect()函数来绘制矩形，代码实现如下所示：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.rect(20，20，100，100);
ctx.stroke();
以上代码中，按照顺序传入了x，y，width和height四个参数，表示要绘制的矩形的位置和大小。最后使用stroke()函数将路径进行描边。
3.1.3 绘制圆形
要绘制圆形，我们需要使用canvas对象的arc()函数，具体实现如下：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100，100，50，0，2*Math.PI);
ctx.stroke();
以上代码中，首先使用beginPath()函数开始一个新的路径，接着使用arc()函数画一条从一个给定点开始到另外一个给定点结束的弧线，以(100，100)为圆心，半径为50，起始角度为0，结束角度为2π。最后使用stroke()函数将路径进行描边。
3.1.4 绘制字符
canvas API提供了绘制字符的方法，可以使用canvas对象的fillText()和strokeText()函数，具体实现如下：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
以上代码中，首先使用getElementById方法获取canvas元素，接着使用getContext("2d")获取canvas绘制上下文，我们设置字体样式，使用strokeText()函数将指定的文本绘制在画布上。
3.2 绘制样式与颜色
除了基本图形之外，canvas API还提供了样式与颜色的方法，能够增强绘图效果，下面我们来看一下这些方法的使用。
3.2.1 颜色
在canvas中，图形和文本的颜色都是用CSS颜色值来表示的。可以使用fillStyle和strokeStyle属性来设置填充和描边的颜色值。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);
以上代码中，我们使用fillStyle属性将填充色设置为红色，然后使用fillRect()函数绘制一个红色的矩形。
3.2.2 渐变
canvas API提供了两种渐变类型，一种是线性渐变，另一种是径向渐变。可以使用createLinearGradient()函数或createRadialGradient()函数创建渐变对象。
3.2.2.1 创建线性渐变
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"red");
gradient.addColorStop(1,"white");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 100, 100);
先创建一个简单的线性渐变实例，从左上角到右上角。从红色到白色。
3.2.2.2 创建径向渐变
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var gradient = ctx.createRadialGradient(100,100,20,100,100,60);
gradient.addColorStop(0,"red");
gradient.addColorStop(1,"white");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 100, 100);
径向渐变可以被认为是 从一个圆形中心，到这个圆形之外渐变的过渡，渐变由中心向外辐射。
3.2.3 阴影
在canvas中，可以设置阴影使图形或文本具有立体感。可以使用shadowOffsetX、shadowOffsetY、shadowBlur和shadowColor属性来定义阴影，如下所示：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 100, 100);
以上代码中，我们使用shadowOffsetX和shadowOffsetY设置阴影的偏移位置，使用shadowBlur设置模糊度，使用shadowColor设置阴影的颜色，然后使用fillRect()函数绘制一个阴影矩形。
4. Canvas动画
canvas API不仅可以用来绘制静态图形，还可以用来制作动画效果，下面我们来看一下canvas制作动画的基本步骤。
4.1 清空画布
在绘制下一帧动画之前，我们需要将上一帧的画布内容清空，可以使用canvas对象的clearRect()函数来实现：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
以上代码清空了整个画布，使用clearRect()函数，传入0, 0, canvas.width和canvas.height四个参数即可。
4.2 绘制新帧
在清空画布之后，我们需要绘制新的帧，这一步包括两个基本操作，分别是重新计算每个物体的位置和重新绘制每个物体，这是一个常规的做法。以下是实现方法：
第一步是重新计算每个物体的位置，我们需要在每个时间步长中对每个物体的位置进行更新。
function updatePosition(object) {
object.x += object.vx;
object.y += object.vy;
}
以上代码中，我们定义一个updatePosition()函数，该函数接受一个对象作为参数，然后更新该对象的x和y属性使其移动。
第二步是重新绘制每个物体，我们需要在每个时间步长中重新绘制所有的物体。
function drawObject(object) {
ctx.fillStyle = object.color;
ctx.fillRect(object.x, object.y, object.width, object.height);
}
以上代码中，我们定义一个drawObject()函数，该函数接受一个对象作为参数，然后使用填充颜色和fillRect()函数重新绘制该对象。
4.3 开始动画循环
在清空画布并绘制新的帧后，我们需要创建一个动画循环来反复绘制新帧。使用JavaScript的setInterval()函数或requestAnimationFrame()函数可以实现动画循环，以下是实现方法：
4.3.1 setInterval()函数
setInterval(function() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重新计算每个物体的位置
for (var i = 0; i < objects.length; i++) {
updatePosition(objects[i]);
}
// 重新绘制每个物体
for (var i = 0; i < objects.length; i++) {
drawObject(objects[i]);
}
}, 1000 / 60);
以上代码中，我们使用setInterval()函数和1000 / 60间隔来反复执行清空画布、重新计算每个物体的位置和重新绘制每个物体的步骤。
4.3.2 requestAnimationFrame()函数
function loop() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重新计算每个物体的位置
for (var i = 0; i < objects.length; i++) {
updatePosition(objects[i]);
}
// 重新绘制每个物体
for (var i = 0; i < objects.length; i++) {
drawObject(objects[i]);
}
// 反复调用loop函数
requestAnimationFrame(loop);
}
// 开始动画循环
requestAnimationFrame(loop);
以上代码中，我们定义了一个名为loop()的函数，该函数在每个时间步长中清空画布、重新计算每个物体的位置和重新绘制每个物体。在函数的最后，我们使用requestAnimationFrame()函数调用loop函数，从而实现帧的循环。
5. 总结
本文介绍了canvas对象的基本概念、获取绘图上下文的方法、常见API以及如何使用canvas实现动画效果。
首先介绍了canvas是HTML5新增的画布元素，它可以通过JavaScript API绘制图形、动画、游戏等效果，增强用户体验；然后介绍了获取2D和3D绘图上下文的方法；接着详细介绍了canvas API，包括绘制基本图形、颜色、渐变和阴影等；最后介绍了如何使用JavaScript的setInterval()函数或requestAnimationFrame()函数实现动画效果。
学了这个，你可以去试着自己画一些图形，或者制作一些简单的动画效果。这里提醒一下，在实际应用中最好将canvas绘制的图形封装起来，避免直接在html中操作canvas。