HTML5 Canvas 基础

<canvas> 是HTML5新增的元素,可以用于绘制图形,制作照片,创建动画。<canvas> 标签只是图形容器,它没有自己的行为,必须使用脚本来绘制图形。

创建一个canvas

1
<canvas id="mycanvas" width="300" height="300"></canvas>

<canvas>标签只有两个属性—— widthheight,当没有设置宽度和高度的时候,<canvas> 的默认大小为300px×150px。需要注意的是,如果使用css来定义<canvas>的大小,在绘制时图像会伸缩以适应它的框架尺寸:如果CSS的尺寸与初始画布的比例不一致,它会出现扭曲。

渲染上下文

<canvas>元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

<canvas>创造了一个固定大小的画布,它公开了一个或多个渲染上下文,其可以用来绘制和处理要展示的内容。

canvas起初是空白的,首先需要找到渲染上下文,然后在它的上面绘制。

1
2
var canvas=document.getElementById("mycanvas");
var ctx = canvas.getContext('2d');

<canvas>有一个叫做 getContext()的方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数,就是上下文的格式。

检查浏览器兼容性

最新版的 FireFox,Safari,Chrome 和 Opera 都支持 HTML5 canvas,但是 IE8及以下都不支持canvas。下面的代码用于检测浏览器的是否支持canvas

1
2
3
4
5
6
7
8
var canvas = document.getElementById('mycanvas'); 

if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}

canvas 坐标

在绘制图形之前,我们还应该先了解一下canvas中的坐标。canvas默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角(坐标为(0,0))。所有元素的位置都相对于原点定位。

绘制 canvas 图形

好的,接下来我们就开始了解怎么使用Canvas的API绘制基本图形了 。

1
2
3
4
5
6
7
var canvas = document.getElementById('mycanvas'); 

if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle="red";
ctx.fillRect(0,0,100,100);
}

上面的两行代码绘制一个红色的矩形:

设置fillStyle属性可以是css颜色,渐变,或图案。fillStyle默认设置是#000000(黑色)。

fillRect(x,y,width,height)方法定义了矩形当前的填充方式,xy指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。widthheight设置矩形的尺寸。

canvas 路径

路径是通过线段或曲线相连形成的不同形状的点的集合。一个路径,甚至一个子路径,都是闭合的。使用路径绘制图形需要一些额外的步骤。
以下是所要用到的方法:

函数 描述
strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式
lineWidth 定义绘制线条的宽度
beginPath() 开始一个新的绘制路径
moveTo(x,y) 移动画笔到指定的坐标点(x,y),该点就是新的子路径的起始点
lineTo(x,y) 使用直线边接当前端点和指定的坐标点(x,y)
stroke() 沿着绘制路径的坐标点顺序绘制直线
closePath() 如果当前的绘制路径是打开的,则关闭掉该绘制路径

这里需要注意的是,当你调用fill()函数时,所有没有闭合的形状都会自动闭合,所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

下面的代码绘制了一个三角形:

1
2
3
4
5
6
7
8
9
10
11
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
}

canvas 圆弧

绘制路径我们可以使用arc()方法。该方法有六个参数:x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时,是逆时针方向,否则顺时针方向。

1
2
3
4
5
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

注意:arc()函数中的角度单位是弧度,不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。

canvas 文本

canvas 提供了两种方法来渲染文本:

fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的。

strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的。
文本被填充方式:

1
2
3
4
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

文本边框备绘制方式:

1
2
3
4
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.font="30px Arial";
ctx.strkeText("Hello World",10,50);

canvas 图像

引入图像到canvas里需要以下两步基本操作:

  1. 获取一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源,也可以通过提供一个URL的方式来使用图片。
  2. 使用drawImage()函数将图片绘制到画布上。

获取图片和绘制图片,下面只展示最简单的一种:

1
2
3
4
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
var img=document.getElementById("img");
ctx.drawImage(img,10,10);

drawImage有三个参数:drawImage(image, x, y)。其中imageimage或者 canvas对象,xy是其在目标canvas里的起始坐标。

小结

今天已经很晚了,关于canvas暂时就先讲到这里,以上就是关于canvas的基础功能的一些介绍。