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

jinxi1112

已于 2022-04-22 15:16:11 修改

阅读量1k

点赞数

分类专栏：小程序文章标签： canvas

于 2021-07-15 16:06:35 首次发布

本文链接：https://blog.csdn.net/jinxi1112/article/details/118761307

版权

本文介绍了如何在微信小程序中使用canvas制作拼图动画，包括制作思路、准备工作和技术实现。主要内容包括九宫格拼图的制作，canvas的clip方法应用，以及动画效果的实现，特别强调了canvas动画在不同平台的兼容性和性能问题。

摘要由CSDN通过智能技术生成

效果如上图

制作思路：

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 // 单个拼图的高度
}

绘制拼图的方法，重点&