微信小程序使用canvas制作拼图动画

 

效果如上图

制作思路：

1. 制作9个由特殊图形拼成的九宫格，包含灰色模糊和彩色高亮；2.生成小拼图并进行一系列变化实现蓄能弹起的动画效果；3.将生成的拼图拼贴在对应的位置上，产生破碎动画特效

准备工作

1.预下载图片：提前准备图片（光效图片和破碎效果图片），图片尽量小

2.将拼图图片利用canvas rgb通道方法制作成模糊灰度图，canvas图片滤镜参考博文小程序中canvas实现图片滤镜_一个......的博客-CSDN博客_canvas 小程序

3.计算拼图的位置，以及拼图的所有坐标

技术实现：

1.制作九宫格拼图，注意留取边框的位置

通过一个star数组来决定高亮还是灰色模糊，初始值全部置灰 star=new Array(9).fill(false)

<view
            class="canvas-wrap"
            style="left:{
  {stop1[index].x}}px;top:{
  {stop1[index].y}}px"
            wx:for="{
  {jigArr}}"
            wx:key="index"
        >
            <canvas
                canvas-id="myCanvas{
  {index+1}}"
                style="width:{
  {imgW}}px;height:{
  {imgH}}px"
            ></canvas>
        </view>
...
 data: {
    jigArr: new Array(9),
    stop1: [
          { x: -20, y: -20 },
          { x: 82, y: -20 },
          { x: 184, y: -20 },
          { x: -20, y: 72 },
          { x: 82, y: 72 },
          { x: 184, y: 72 },
          { x: -20, y: 164 },
          { x: 82, y: 164 },
          { x: 184, y: 164 }
    ], // 9张拼图的位置
    imgW: 140, // 单个拼图的宽度
    imgH: 130 // 单个拼图的高度
}

绘制拼图的方法，重点：使用了canvas的ctx.clip方法，将canvas裁成拼图形