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/
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
