canvas画布的基础使用

canvas画布的基础使用

首先它自带300*150的宽高，它的宽高只能用标签属性来设置，不能用样式表设置
帆布canvas绘画通过api来操作（js绘图）：
1、获取画布（找到canvas元素节点）
2、获取画笔=>元素节点.getContext（“2D”）
3、拿起笔来，放下在对应位置=>元素节点.moveTo（x位置，y位置）
4、将笔从当前所在位置，画一条“路径”到目标位置=>元素节点.lineTo（x位置，y位置）
5、给笔加样式
元素节点.strokeStyle=“颜色”
元素节点.lineWidth=像素
元素节点.fillStyle=“颜色”
元素节点.lineJoin=“mitter（交线无默认值），round（交线圆角），bevel（交线斜角）”
元素节点.lineCap=“butt（没有线冒默认值），round（圆角线冒），square（方形线冒）”
6、描线=>元素节点.stroke（）
7、清除路径列表中所有路径=>元素节点.beginPath（）
8、填充（当前路径列表中的所有封闭或半封闭图形）=>元素节点.fill（）
9、矩形=>rect，fillRect，strokeRect 参数（x位置，y位置，宽，高）fillRect和strokeRect与路径无关
10、圆形=>arc 参数（x位置，y位置，半径，某个角度，到某个角度，顺逆时针）
11、清空画布=>clearRect 参数（x，y，w，h）