功能
canvas 是一个 HTML 标签，表面上看上去跟其他 HTML标签没有太大差别；但是通过它，可以在它所占据的区域中，绘制所需要的图形
用法
基本用法
首先需要在 HTML 文件中建立一个 canvas 标签；
1
| <canvas id='tutorial' width='150' height='150'></canvas>
|
其次通过选择器选中它，调用它的 getContext() 方法，获得它的上下文对象，这个上下文对象后续要用来画图；
1
2
| var canvas = document.getElementById('tutorial');
var context = canvas.getContext('2d');
|
canvas 有多种上下文对象，可以用来绘制不同类型的图片，例如 2D 图形、3D 图形；在调用 getContext 方法时，需要传入类型的参数，这样才能返回对应类型的上下文对象；
以下是完整的 HTML 文件内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
|
绘制形状
尝试在页面上绘制两个不同颜色的相互重叠的正方形
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
|
最终执行效果如下：
知识点：ctx 的方法并不是一次性的，而是可以多次重复调用的，每调用一次，都会根据参数产生一次效果，可以理解为 ctx 就像画笔一样，每调用一次画笔的方法，都会画上相应的效果；多次调用，就会有多个效果；
canvas 原生只支持两种形状，一个是长方形，一个是路径（即由点连接起来的线）；其他图形都可以通过路径来实现；幸运的是，有一堆提供定义好的函数，可以操作路径生成常见的形状，甚至是复杂的图形，而无须直接通过绘制线来实现；
绘制长方形的函数共有三个：
- fillRect(x, y, width, height): 绘制有填充颜色的长方形
- strokeRect(x, y, width, height): 绘制没有填充颜色的长方形，也即只有轮廓；
- clearRect(x, y, width, height): 将指定位置的长方形区域擦除掉，变成完全透明的；
1
2
3
4
5
6
7
8
9
10
| 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);
}
}
|
结果如下：
注意：长方形的三个函数在调用后，会在画布上立即产生绘制后的效果；但路径相关的函数并非如此；
基于图像
绘制
drawImage 方法的第一个参数 image 有特殊的类型要求，一般是通过 canvas.createImage 方法来创建一个空白图像对象 img ，然后给 img 的 onload 方法添加回调函数，表示当图片加载完成后将执行的动作，之后给 img 的 src 赋值图片的 URL 或本地路径（赋值后会触发 onload 事件）
1
2
3
4
5
6
| const img = canvas.createImage();
img.onload = () => {
console.log('img onload done.');
}
img.src = "http://img.url.com"
context.drawImage(img, 0, 0);
|
缩放
剪裁
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
1
2
3
4
5
6
7
8
9
| <html>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
<div style="display:none;">
<img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
<img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
</div>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
| function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(document.getElementById('source'),
33, 71, 104, 124, 21, 20, 87, 104);
ctx.drawImage(document.getElementById('frame'), 0, 0);
}
|
