Canvas 基础
canvas应用领域
游戏
可视化数据（图表）
banner、炫酷效果
地图
模拟器，平台工具（在线PS）
canvas元素
属性
width
height
获取绘图环境
getContext(2d/webgl)
基本图像绘制
路径
beginPath() 开启路径
closePath() 关闭路径 自动闭合路径
绘制起始点
moveTo(x, y)
直线
lineTo(x, y)
描边
属性 strokeStyle
属性 lineWidth
stroke()
填充
属性 fillStyle
fill()
快速矩形
rect(x,y,w,h) 快速矩形路径
fillRect(x,y,w,h) 快速填充矩形、路径自成一体
strokeRect(x,y,w,h) 快速描边矩形
clearRect(x, y, w, h) 删除矩形
圆弧
arc(x, y, r, start, end, true/false);
文字
strokeText(text, x, y) 描边文字
fillText(text, x, y) 填充文字
font 同css的font属性
textAlign: start/end/left/right/center 水平对齐方式
textBaseline: alphabetic/top/bottom/middle 垂直对齐方式
清除画布
clearRect(0, 0, 画布宽, 画布高)
canvas.width = canvas.width
补充
弧度
1 弧度 = 角度 / 180 * π
