canvas画布进阶

canvas画布进阶

1：canvas阴影

       canvas.shadowColor：设置图形阴影颜色（直接取值颜色）
     canvas.shadowBlur：设置图形阴影模糊度（值为大于1的数）
     canvas.shadowOffsetX：设置阴影x方向偏移量
     canvas.shadowOffsetY：设置阴影y方向偏移量

2：canvas颜色渐变

（1）线性渐变:createLinearGradient(x,y,x1,y1)
        参数：x、y表示开始点的坐标，x1、y1表示释放点的坐标
        addColorStop(value,color)：指定渐变色,value取值为0-1之间

（2）径向渐变:createRadialGradient(x,y,r,x1,y1,r1)
         参数：x、y表示开始圆心位置，x1、y1表示结束圆心位置，r和r1表示开始结束的圆半径

         addColorStop(value,color)：指定渐变色,value取值为0-1之间

canvas常用的基本方法
方法	说明
save()	保存当前环境的状态
restore()	返回之前保存过的路径状态和属性

canvas转换操作的方法
方法	说明
rotate()	旋转当前绘图
translate()	重新映射画布上的 (0,0) 位置
transform()	替换绘图的当前转换矩阵
scale()	缩放当前绘图至更大或更小

3：画布转换基本步骤

（1）：保存当前的状态，开始新的状态：context.save();

（2）：重置新画布的0,0点：context.translate(x，y);

（3）：让重置后的画布旋转一定角度：context.ratate(弧度);(正角度顺时针旋转，反之逆时针)

（4）：绘制要绘制的图形（从表从新的画布坐标进行定位）

（5）：回到之前保存的画布状态：context.restore();

注意：整个流程不能颠倒,必须按如上步骤进行实现

技巧：

1：画布绘制画布

方法：创建一个画布canvas对象；先把所有图形全部绘制到新建的canvas对象上；最后一次性把新的canvas通过drawImage方法，把新建canvas绘制到界面的canvas上

优点：提升绘制效率，在减少界面上canvas绘制次数

2：图片加载画布

方法：创建一个画布canvas对象；先把所有图形全部绘制到新建的canvas对象上；定义一个Image对象，通过canvas的toDataURL函数，加载当前图片，并把图片加载到界面上

优点： 提升绘制效率，在减少界面上canvas绘制次数