<canvas>h5新标签:定义图形，比如图表和其他图像,必须使用脚本来绘制图形。
兼容性：IE9+ chrome FF
设置画布大小(属性)
<canvas id="c1" width="800" height="600"></canvas>
例：画一个三角形（画图步骤）
1.获取画布
2.创建画笔
3.选区：从起始点->连接点
4.描边/填充
var oC=document.getElementById('c1');
var gd=oC.getContext('2d');
gd.moveTo(200,200);//起始点
gd.lineTo(585,390);//连接点
gd.lineTo(157,393);
gd.closePath();//最后一条线自动连接
gd.lineWidth = 20;//线条的宽度，不加px
gd.strokeStyle='red';//描边颜色，需要放在gd.stroke()上面
gd.stroke();//描边
//gd.fillStyle='red';更改填充颜色，需要放在gd.fill()上面
//gd.fill();填充，默认黑色
如果我再画一个图形，设置一个绿色，那么会是什么情况呢？
答案是两个图形都会变成绿色。
注意：
1.先设置好画笔，做好选区后填充或描边
2.画图形之前应该抬起画笔
gd.beginPath（）
例：下面写一个建议画板
1.简单布局
<canvas id="c1" width="800" height="600"></canvas>
<style>
body{background: #000;}
canvas{background: #fff; }
</style>
2.写js
window.onload=function(){
var oC=document.getElementById('c1');
var gd=oC.getContext('2d');
oC.onmousedown=function(ev){
gd.moveTo(ev.pageX,ev.pageY);
oC.onmousemove=function(ev){
gd.lineTo(ev.pageX,ev.pageY);
gd.stroke();
}
oC.onmouseup=function(){
oC.onmousemove=null;
oC.onmouseup=null;
}
}
}
注意：如果canvas布局中加一个margin: 100px;那么会出现什么问题呢？
答案是将上文中gd.moveTo和gd.lineTo改为：
gd.moveTo(ev.pageX-oC.offsetLeft,ev.pageY-oC.offsetTop);
gd.lineTo(ev.pageX-oC.offsetLeft,ev.pageY-oC.offsetTop);
形状(矩形：四个值分别代表x,y,width,height)
gd.strokeStyle = 'red';//将矩形的线框设置成红色
gd.strokeRect(100,100,200,100);//线框矩形
gd.fillStyle = 'green';//设置矩形的填充颜色为绿色
gd.fillRect(100,100,200,100);//填充好的矩形
例：柱状图
未完待续
