Canvas基础知识详解
• 标签
– <canvas>
• 不支持canva 的浏览器可以看到的内容
– <canvas>
• 绘制环境
– getContext("2d");目前支持2d的场景
• 绘制矩形
– rect(L,T,W,H):创建一个矩形
– fillRect(L,T,W,H):绘制填充的矩形
– strokeRect(L,T,W,H)绘制矩形(无填充)
• 默认一像素黑色边框
• 设置绘图
– fillStyle:填充颜色(绘制canvas是有顺序的)
– lineWidth:线宽度,笔迹粗细
– strokeStyle:边线颜色
• 绘制路径
• beginPath()
• closePath()
• moveTo()
• lineTo()
– stroke:绘制,划线(黑色默认)
– fill:填充(黑色默认)
– rect(矩形区域)
– clearRect擦除一个矩形区域
– save进入到XXX()状态
– restore退出xxx()状态
• 绘制圆形
– arc(x,y,半径,起始弧度,结束弧度,旋转方向)
– x,y起始位置
– 弧度与角度:弧度=角度 x π / 180
– 旋转方向:顺时针(默认:false),逆时针(true)
– 例子钟表
• 绘制字体
• font:设置字体大小
• fillText:填充字体
• strokeText:绘制字体