html5中Canvas API

Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap)。

1.Canvas基本框架

*HTML

<canvas id="canvas" style="width: ;height= ;">您的浏览器不支持canvas!</canvas>//标签里面可以设置style，符合W3C标准.

*Javascript 

每个canvas节点都有一个对应的context对象（上下文对象），Canvas API定义在这个context对象上面，所以需要获取这个对象，方法是使用getContext方法。

var canvas=document.getElementById('canvas');

var context=canvas.getContext('2d');//使用context进行绘制

注:如果getContext的参数是"webgl",就表示用于生成3D图像（即立体图案）.

2.基本绘图状态

*直线

context.moveTo(x,y);//起始位置

context.lineTo(x,y);//终点坐标

*弧线

context.arc(cx,cy,r,sAng,eAng,anticlock);//cx，cy是圆心坐标；r是半径；sAng,eAng是圆弧的角度；anticlock-布尔值(表示顺时针还是逆时针作图)

*封闭图形-隔开每次画图

context.beginPath();//开始新的状态路径绘制

context.closePath();//关闭此次绘制

3.绘图样式

context.lineWidth-线条宽度

context.strokeStyle-绘图线条的样式

context.fillStyle-填充的样式

4.绘图

context.stroke();-绘图命令

context.fill()；-填充命令

5.指定区域刷新

contetx.clearRect(x,y,width,height);

6.找到canvas画布

context.canvas

7.canvas画布本身的属性

canvas.width

canvas.height

canvas.getContext('2d')//绘图环境

8.绘制动画效果

setInterval(function(){

     render();//渲染

     update();//数据更新

},50);//定时器

9. 绘制文本-fillText(string, x, y) 用来绘制文本，它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前，需用font设置字体、大小、样式（写法类似与CSS的font属性）。与此类似的还有strokeText方法,用来添加空心字。

// 设置字体
ctx.font = "Bold 20px Arial"; 
// 设置对齐方式
ctx.textAlign = "left";
// 设置填充颜色
ctx.fillStyle = "#008600"; 
// 设置字体内容，以及在画布上的位置
ctx.fillText("Hello!", 10, 50); 
// 绘制空心字
ctx.strokeText("Hello!", 10, 100);

10.Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

• createLinearGradient(x,y,x1,y1) - 创建线条渐变
• createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():

11.Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

• drawImage(image,x,y); // x,y表示图像左上角在画布中的位置

例:var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);