这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【如何使用Canvas及动画实现】
如何使用Canvas及其动画实现
什么是Canvas?
Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。
Canvas 对象表示一个 HTML 画布元素–。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
定义和用法
首先，在HTML元素中定义一个canvas标签
<canvas id="tutorial" width="150" height="150"></canvas>
- 1
获取CANVAS对象及渲染上下文
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
- 1
- 2
基本形状
fillRect(x, y, width, height)
绘制一个填充的矩形
strokeRect(x, y, width, height)
绘制一个矩形的边框
clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
绘制路径
- 首先，你需要创建路径起始点。
- 然后你使用画图命令去画出路径。
- 之后你把路径封闭。
- 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
常用命令
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()
通过线条来绘制图形轮廓。
fill()
通过填充路径的内容区域生成实心的图形。
移动笔触
一个非常有用的函数，而这个函数实际上并不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是moveTo()。或者你可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。
moveTo(x, y)
将笔触移动到指定的坐标x以及y上。
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // 口(顺时针)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // 左眼
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // 右眼
ctx.stroke();
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
更多详细的例子请参考MDN文档
图形失真
不要使用style属性来设置width和height
本质上，canvas画布等同于一张位图，它拥有自己的width和height属性，这相当于设置了分辨率
<canvas width=100 height=100></canvas>
- 1
这相当于一张100*100分辨率的图片，如果我们使用style属性强行将其方法
<canvas width=100 height=100 style="width:1000px;height:1000px"></canvas>
- 1
这样图片就会变得及其的模糊。
再强调一次：
不要使用style来设置canvas的宽度和高度！！！
图形连笔
连笔是由于在绘制需要断开连线的时候没有移动笔触导致。使用moveTo()函数来避免这个问题
动画无法清空画布
有的时候我们发现明明已经使用了clearRect()函数来清空画布，但是还是无效。
这里的小细节不容易发现，在绘制路径开始之前通常需要加上beginPath()方法。否则使用路径的动画无法清空画布。