canvas学习

<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);//填充好的矩形

例：柱状图
未完待续