画图的步骤
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();
