HTML5 Canvas

目前大部分新型浏览器器实现了HTML5 Canvas 原声的绘图API，但只支持2D渲染环境，这里创建一个空白的画布元素

<canvas width="500" height="500"></canvas>

IE9一下的IE浏览器不支持画布元素，在这些浏览器上，我们有两个选择：

1、当浏览器不支持画布时显示提示，可能是一段提醒用户升级浏览器的文案，画布的innerHTML就是画布的提示信息。

2、使用ExplorerCanvas脚本兼容老版本的IE浏览器，不过有弊病，脚本文件比较大（99KB），而且需要在onload执行画布相关脚本才能生效。

---

上下文对象

操作图形需使用画布的上下文对象，可以通过以下方法获取上下文

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

var context=canvas.getContext("2d");

---

线条

context.moveTo(40,40);//将笔移动到（40,40）

context.lineTo(340,40);//用笔画线到（340,40）

context.stroke();//让线条描绘出来

---

路径

线条除了绘制直线，还可以勾出路径

　　1、绘制三根线条

context.moveTo(40,40);  

context.lineTo(340,40);

context.lineTo(340,100);

context.lineTo(40,100);

context.stroke();

　　2、绘制第一根线条前，标记一个路径的开始，由效果图看出，第一条线没有显示出来，相当于beginPath之前的代码没有起作用

context.moveTo(40,40);

context.beginPath();

context.lineTo(340,40);

context.lineTo(340,100);

context.lineTo(40,100);

context.stroke();

　　3、在绘制线条之前标记路径结束。路径将进行闭合

context.beginPath();

context.moveTo(340,40);

context.lineTo(340,100);

context.lineTo(40,100);

context.closePath();

context.stroke();

　　4、填充路径圈定区域

context.beginPath();

context.moveTo(340,40);

context.lineTo(340,100);

context.lineTo(40,100);

context.closePath();

context.fill();

　　5、如果路径没有闭合，填充前将自动闭合路径

context.beginPath();

context.moveTo(340,40);

context.lineTo(340,100);

context.lineTo(40,100);

context.fill();

　　6、如果路径上的点在一根线条上.无法圈定区域，将显示空白

context.beginPath();

context.moveTo(340,40);

context.lineTo(340,100);

context.lineTo(340,150);

context.fill(); 

---

 矩形

绘画矩形有用于勾画矩形和填充矩形使用的两个方法

context.strokeRect(x,y,width,height);//只勾画出矩形的外框

context.fillRect(x,y,width,height);//画出矩形并使用颜色填充矩形区域

---

圆形

圆形与矩形不同，没有勾画和填充的方法，可通过arc圈出来的是圆形路径，再通过前面提及的stroke和fill方法进行勾画和填充。

context.arc(x,y,radius,strartAngle,endAngle,anticlockwise);

这一共有6个参数，x是圆心的横坐标，y是圆心的纵坐标，radius是半径，startAngle是开始画园的角度，endAngle是结束花园的角度，anticlockwise是画圆方向。

startAngle和endAngle的角度使用弧度计算，整圆弧度2π，将弧度和角度换算方式如下

var radians=degrees*(Math.PI/180);//radians是弧度，degrees是角度

anticlockwise是可选项，默认值是false，使用逆时针。

context.beginPath();

context.arc(230,90,60,Math.PI*-1/4,Math.PI*3/4);//从-1/4π到3/4π，以(230,90)为圆心，半径60px画圆。

context.closePath();

context.fill();

---

文本

除了绘制图形，还可以往画布上插入文本，但该文本不是真实的文字，而是栅格化的图形，绘制文本有两种方法，分别是用于描边的strokeText和用于填字的fillText方法

var text="Hello,World!";

context.fillText(text,x,y);

此处text是文本的内容，x是画布左边到文字左边的距离，y是画布上边到文字下边的距离

因为在默认情况下，使用10px sans-serif为文本属性，除了修改文字大小，还可以通过修改font属性来修改文本属性

var text="Hello,World!";

context.font="italic 60px serif";

context.fillText(text,40,40);

font属性与css中的font属性值可以通用

 来自：http://www.neoease.com/html5-canvas-line-rectangle-circle-text/