这篇开始介绍Canvas的内容。Canvas是属于HTML5的内容。下面就来介绍一下Canvas。
Canvas元素及画布
Canvas元素其实写法跟其他的HTML元素写法一样，比如下面的项目中的例子：
代码1 项目中Canvas元素1
2
3
4
5
6
7
8
9
10
11
12
13
14<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="game" data-status="start">
<-- 其他代码 !->
<canvas id="canvas" width="700" height="600">
<!-- 动画画板 -->
</canvas>
</div>
<-- 其他代码 !->
</body>
</html>
代码1中，Canvas元素在页面上创建了一个宽700，长600的画布，这个就是Canvas实现图形的基础。
然后需要在JavaScript代码中写下这么两行代码：
代码2 获取Canvas对象1
2var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
这段代码先是获取了canvas元素，然后在调用canvas元素的getContext方法访问获取2d渲染上下文。得到的context才能进行绘画的操作。
下面是一些关于Canvas的绘制的介绍，因为是基础内容的介绍，所以就主要以代码形式说明。
Canvas绘制
Canvas绘制分下面几种： 线跟圆弧，几何图形，文本，图片。
绘制原理
Canvas绘制的原理是把画布坐标化，以左上角为原点，上边为x坐标正方向，左边为y坐标正方向。所有的绘制方法都是context下的方法。
线跟圆弧
代码1 线跟圆弧的绘制1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23/* 线的绘制 */
// 设置路径
context.beginPath();
// 设置路径起始点
context.moveTo(320,470);
// 设置路径终点
context.lineTo(320,480);
// 绘制路径
context.stroke();
/* 圆弧的绘制 */
context.beginPath();
// 圆弧的绘制使用context.arc()方法
// context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
// x,y为圆心坐标
// redius为圆的半径
// startAngle，endAngle分别为开始角度跟结束角度（圆的水平右侧为0°）
// anticlockwise为顺/逆时针设置，默认值为false顺时针
context.arc(250, 250, 300, 0, Math.PI, false);
// 绘制路径
context.stroke();
// 使用fill()方法将会把圆弧两端直接闭合填充
// context.fill();
几何图形
代码2 集合多边形跟圆形的绘制1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19/* 矩形的绘制 */
context.beginPath();
context.moveTo(320, 470);
context.lineTo(350, 470);
context.lineTo(350, 500);
context.lineTo(320, 500);
// 设置闭合路径
context.closePath();
context.stroke();
// 填充路径用fill()方法
// context.fill();
// 也可以直接使用矩形的绘制方法context.rect(x, y, width, height);
// context.rect(320, 500, 30, 30);
/* 圆形的绘制 */
context.beginPath();
//context.arc(250, 250, 300, 0, 2 * Math.PI, false);
// 使用fill()方法将填充整个圆形
// context.fill();
文本
代码3 文本的绘制1
2
3
4
5
6
7
8/* 文本的绘制 */
// 先设置字体样式
context.font = '25px arial';
// context.strokeText()方法将文本描边绘制
// 三个参数分别为被绘制的字符串，坐标(x,y)
context.strokeText("描边文本", 100, 100);
// context.fillText()方法将文本填充绘制
context.fillText("填充文本", 100, 100);
图片
代码4 图片的绘制1
2
3
4
5
6
7
8
9
10
11/* 图片的绘制 */
// 设置图片对象
var image = new Image();
// 设置图片地址
image.src = 'plane.png';
// 设置图片加载完成后的回调函数
image.onload = function () {
// 绘制图片context.drawImage(img, x, y, width, height)
context.drawImage(image, 50, 50, 60, 100)
// 裁剪图片也是用context.drawImage(image, source_x, source_y, source_width, source_height, x, y, width, heigh);
}
样式设置
代码5 绘制样式设置1
2
3
4
5
6
7
8
9
10
11/* 描边颜色设置 */
context.fillStyle = #999;
/* 填充颜色设置 */
context.strokeStyle = #333;
/* 线宽设置 */
context.lineWidth = (Number);
/* 设置字体样式 */
context.font = '25px arial';
Canvas擦除
代码6 绘制擦除1
2
3
4/* 擦除 */
// 擦除可以使用context.clearRect(x, y, width, height)方法
// 下面直接擦除整个画布
context.clearRect(0, 0, canvas.width, canvas.height);
下一篇将会介绍Canvas动画跟项目中的关于Canvas跟动画的设计。