标签

    1. <canvas>
    4. 不支持canvas的浏览器可以看到的内容
    7. </canvas>
    13. 绘制环境
    16. getContext(’2d’): 目前支持2d的场景
    22. 绘制方块
    25. fillRect(L,T,W,H)     : 默认颜色是黑色
    28. strokeRect(L,T,W,H): 带边框的方块
    34. 设置绘图
    37. fillStyle: 填充颜色(绘制canvas是有顺序的)
    40. linewidth: 线宽度, 是一个数值
    43. strokeStyle: 边线颜色
    49. 边界绘制
    52. lineJoin     : 边界连接点样式
    55. miter(默认)、round(圆角)、bevel(斜角)
    58. lineCap：设置或返回线条末端线帽的样式
    61. butt(默认)、round(圆角)、square(高度多出为宽一半的值)
    67. 绘制路径
    70. beginPath: 开始绘制路径
    73. closePath: 结束绘制路径
    76. moveTo   : 移动到绘制的新目标点
    79. lineTo      :  新的目标点
    88. 绘制路径_2
    91. stroke: 画线, 默认黑色
    94. fill      : 填充, 默认黑色
    97. rect   :  矩形区域
    100. clearRect : 删除一个画布的矩形区域
    103. save  :  保存路径
    106. restore: 恢复路径
    112. 小例子:  方块移动
    118. 绘制圆
    121. arc(x, y, 半径, 起始弧度, 结束弧度, 旋转方向)
    124. x, y：圆心位置
    127. 弧度与角度的关系:  弧度 = 角度*Math.PI/180
    130. 旋转方向: 顺时针(默认: false)、逆时针(true)
    135. 绘制其他曲线
    138. 通过moveTo设置起点
    141. arcTo(x1, y1, x2,y2，r)
    144. 第一组坐标、第二组坐标、半径
    147. quadraticCurveTo(dx, dy, x1, y1)
    150. 二次贝塞尔曲线: 第一组控制点、第二组结束点
    153. bezierCurveTo(dx1, dy1, dx2, dy2, x1, y1)
    156. 三次贝塞尔曲线: 第一组控制点、第二组控制点、第三组结束点
    165. 变换
    168. translate
    171. 偏移: 从起始点为基点, 移动当前坐标位置
    174. rotate
    177. 旋转: 参数为弧度
    180. 例子: 旋转的小方块
    183. scale
    186. 缩放例子: 旋转和缩放的小方块