初识canvas

前言

canvas是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图 ，最近在读《HTML5程序设计(第2版)》下面对其中最好玩的canvas的学习做下读书笔记与实验。

历史

Canvas的概念最初是由苹果公司提出的，用户在Mac OS X WebKit中创建控制板部件。在Canvas出现之前，开发人员若要在浏览器中使用绘图API，只能使用flash和svg插件，或只有ie支持的vml，或者一些JavaScript技巧。

替换内容

访问页面的时候，如果浏览器不支持canvas元素，可以通过下面的方式提示访问者，

<canvas id="canvas">
Update your brower to enjoy canvas
</canvas>

除了上面代码中的文本外，同样还可以使用图片，不论文本还是图片都会在浏览器不支持canvas元素的情况下显示出来

使用canvas API

首先获取canvas的context，然后通过context的api进行绘制图形。getContext(contextID)，参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

绘制直线

beginPath();方法开始一条路径，或重置当前的路径。

moveTo(x,y);将画笔移动到画布的一个位置。

lineTo(x,y);方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。

stroke();将结果绘制到画布上。

//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70,140);
context.lineTo(140,70);
//将这条线绘制到canvas上
context.stroke();

效果：



绘制带有填充色的矩形

fillRect(x,y,width,height);

x:矩形左上角的x坐标，y:矩形左上角的y坐标;

width:矩形的宽度，height:矩形的高度。

//将填充色设为红色
context.fillStyle = '#FF0000';
//设置填充位置、大小
context.fillRect(50,50,60,60);

效果：



绘制曲线

绘制曲线使用quadraticCurveTo方法，quadraticCurveTo(cpx,cpy,x,y);参数是两组(x,y)点，第一组（cpx,cpy）是贝塞尔控制点，第二组（x,y）是曲线的终点。

//第一条曲线向右下方弯曲
context.quadraticCurveTo(170,0,260,190);
//第二条曲线向右上方弯曲
context.quadraticCurveTo(310,250,410,250);
//使用红色的粗线条来绘制路径
context.strokeStyle='#FF0000';
context.lineWidth=5;
context.stroke();

效果：



在canvas中插入图片

drawImage() 方法在画布上绘制图像、画布或视频。

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

img:规定要使用的图像、画布或视频。sx:可选。开始剪切的 x 坐标位置。

sy:可选。开始剪切的 y 坐标位置。swidth:可选。被剪切图像的宽度。

sheight:可选。被剪切图像的高度。x:在画布上放置图像的 x 坐标位置。

y:在画布上放置图像的 y 坐标位置。width:可选。要使用的图像的宽度。（伸展或缩小图像）

height:可选。要使用的图像的高度。（伸展或缩小图像）

//加载图片 demo.jpg
var img = new Image();
img.src='demo.jpg';
//图片加载完成后将其显示在canvas上
img.onload = function(){
context.drawImage(img,0,0,450,450,0,0,300,300);
}

效果：



canvas文本

context对象的文本绘制功能有两个方法：

- fillText( text, x, y, maxwidth)

- strokeText( text, x, y, maxwidth)

两个函数的参数完全相同，文本和用于指定文本位置的的坐标参数是必填的，maxwidth是可选参数，用于限制字体大小。

//设置字号为60px，字体为impact
context.font = '60px impact';
//将文本填充为红色
context.fillStyle = '#FF0000';
//设置文本居中
context.textAlign = 'center';
//将字体填充到canvas画布上
context.fillText('Hello World!',200,60,400);

效果：

小结

canvas的功能很强大，这里介绍的只是一些初级的使用方法。利用canvas可以实现许多复杂的动画。