canvas实现九宫格心形拼图的方法（附代码）-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

这篇文章给大家介绍的内容是关于canvas实现九宫格心形拼图的方法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

说明

前几天在朋友圈看到好几次这种图片。

这种图片，是用九张图片拼成的一个心形。

感觉很有趣，就上网查了查怎么做，大部分的说法就是用美图秀秀的拼图功能来做，在微信小程序中也有专门做心形拼图的小程序，我都试了试之后，感觉还可以更加简单一些，于是我就自己做了个小程序。

实现小程序的思路

1、有两个 canvas，一个小的 canvas 显示最后会是什么样子，一个大的 canvas 用来最后进行截图，生成图片，保存到相册。
通过CSS的定位，把大的 canvas 移到屏幕外面不让用户看到就可以了。
而如果用小的canvas 保存图片的话，最后的图片有些模糊。

2、canvas 可以看成一个 9 * 9 的网格，

用一个叫 heart 的数组来表示就是这样的。

用其中的小格子，来拼出心形，根据数组的内容在 canvas 上进行渲染。

小程序的功能

这个小程序有选择单张图片，选择多张图片，补充图片，保存图片，重置，推荐，意见反馈，这几个功能。

选择单张图片

当用户点击心形区域的时候，就可以选择单张图片，调用 wx.chooseImage 就可以从本地相册选择图片，然后就把这张图，画在 canvas上，具体画的位置就是用户点击的位置。

在小的 canvas上绑定 touchend 事件，触发事件后，事件中有一个 changedTouches 属性，这是一个保存了，当前变化的触摸点信息的数组，这个数组中的元素有 x 和 y 属性，也就是触摸点距离 canvas 左上角的距离。

// 触摸点在 x 轴的值
var x = e.changedTouches[0].x;
// 触摸点在 y 轴的值
var y = e.changedTouches[0].y;

有 x 轴和 y 轴的距离后，算出具体应该画在哪个格子上。

//grid 表示一个格子的宽度
 
// 确定 x 轴是在第几个格子
x = Math.floor(x / grid);
 
// 确定 y 轴是在第几个格子
y = Math.floor(y / grid);

知道在哪个格子画之后，就要确定画图片的哪部分了，因为所有的格子都是正方形的，但是用户选择的图片不一定是正方形，如果压缩成正方形会很难看，所以我画的时候，选择了正中间的部分来画，

通过 wx.getImageInfo 来获取图片信息，以短边为正方形的宽，然后从（长边 - 短边）/2 的地方来画。

// 获取图片的宽和高
var width = res.width;
var height = res.height;
 
//  如果图片不是正方形，只画中间的部分
// sWidth 表示正方形的宽
var sWidth = width > height ? height : width;
// sx 是源图像的矩形选择框的左上角 X 坐标
var sx = 0;
// sy 是源图像的矩形选择框的左上角 y 坐标
var sy = 0;
if (width > height) {
    sx = (width - height) / 2;
}
if (width < height) {
    sy = (height - width) / 2;
}