Canvas基础

画图的步骤
1.获取画布
var oC = document.querySelector('#c1');
2.创建画笔
var gd = oC.getContext('2d');
3.起始点 连接点 -》路径 //moveTo lineTo
4.closePath(可选)
5.描边/填充 stroke/fill
line 理论上可以画任何图形

    canvas的js
        document.addEventListener('DOMContentLoaded', function(){
                var oC=document.querySelector('#c1');
                var gd=oC.getContext('2d');         //创造画笔
                gd.moveTo(157,393);                  //画笔起始位置
                gd.lineTo(382,36);                   //画笔链接点
                gd.closePath();                      //封闭图画
            gd.strokeStyle='red';                //描边颜色
            gd.fillStyle='red';                  //填充颜色
             gd.lineWidth ='20';                  //描边粗细(不用加px)
             gd.stroke();                         //图形描边
             gd.fill();                           //图形填充
                gd.beginPath()                       //每次画图之前需要抬起画笔
             gd.strokeRect(x,y,w,h);             //画矩形 直接带描边
                gd.fillRect(x,y,w,h);              //画矩形 直接带填充
                gd.clearRect(x,y,w,h);            //清楚画布内容
 }, false)

注意事项
1.先做好选区后填充描边
2.先设置好画笔 后填充描边
3.注意抬起画笔 gd.beginPath();