看完这篇canvas学习笔记,立马入门(附带两个demo)

DAY1:

getContext('2d')

moveTo(100,100);

lineTo(200,100);

stroke();

线条不饱和解决:

设置颜色和线的宽度

ctx.beginPath()//开启新路径,可以设置新样式(和closePath不是对应关系,用处不同)

 

ctx.fill()//填充

 

ctx.closePath()//开启自动闭合,如果手动闭合,会有一点点填充不满

 

非零环绕规则:

 

线的渐变实现:

 

画网格:

 

绘制坐标系:

绘制点:

 

绘制矩形:

 

矩形渐变:

画圆弧