//wxml文件
<view class="page-body">
<view class="page-body-wrapper">
<canvas canvas-id="canvas" class="canvas" bindtouchstart="toachStart" bindtouchmove="toachMove" bindtouchend="toachEnd"></canvas>
</view>
</view>
//js文件
Page({
data: {
radius:10,
fillColor:'#FFB6C1',
},
onReady: function () {
console.log(this.colorRgb(this.data.fillColor));
var context = wx.createCanvasContext("canvas", this);
this.setData({
context:context
})
context.drawImage('https://imgsa.baidu.com/exp/pic/item/0e655ca7d933c8951b305a6ada1373f082020012.jpg', 50, 50, 200, 200);
context.draw();
context.save();
},
toachStart:function(e){
this.toachMove(e)
},
toachMove: function (e) {
let startX1 = e.changedTouches[0].x
let startY1 = e.changedTouches[0].y
let self = this;
//判断当前涂鸦是否在图片范围内
wx.canvasGetImageData({
canvasId: 'canvas',
x: startX1-self.data.radius,
y: startY1 - self.data.radius,
width: this.data.radius*2,
height: this.data.radius*2,
success(res) {
var bool = true;
for(var i=0;i<res.data.length;i++){
if(i%4==3){
if(res.data[i]==0){
bool = false
}
}
}
if(bool){
self.drawHeart(startX1, startY1);
}
}
})
},
toachEnd:function(e){
this.toachMove(e)
},
/**
* 绘制圆形
*/
drawCir: function (x, y) {
var context = wx.createCanvasContext("canvas", this);
context.beginPath();//开始一个新的路径
context.arc(x, y, this.data.radius, 0, 2 * Math.PI, true);//设置一个原点(x,y)，半径为为radius的圆的路径到当前路径
context.setFillStyle(this.data.fillColor)//设置填充色
// context.setStrokeStyle(this.data.fillColor)
context.fill();//填充颜色
// context.stroke();//对当前路径进行描边
context.closePath();//关闭当前路径
context.draw(true);
},
/**
* 绘制自定义图片
*/
drawImg:function(pointX,pointY){
var src = "https://ardownload.kayunzh.com/server/crayon.png";
var context = wx.createCanvasContext("canvas", this);
context.drawImage(src, pointX-this.data.radius, pointY-this.data.radius, this.data.radius*2, this.data.radius*2);
context.draw(true);
},
/**
* 绘制五角星
*/
drawStar: function (x, y){
var r = this.data.radius/2;
var R = this.data.radius;
var context = wx.createCanvasContext("canvas", this);
context.beginPath();//开始一个新的路径
//设置是个顶点的坐标，根据顶点制定路径
for (var i = 0; i < 5; i++) {
context.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72) / 180 * Math.PI) * R + y);
context.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72) / 180 * Math.PI) * r + y);
}
context.setFillStyle(this.data.fillColor)//设置填充颜色
context.setStrokeStyle(this.data.fillColor)//设置描边颜色
context.fill();
context.stroke();//对当前路径进行描边
context.closePath();//关闭当前路径
context.draw(true);
},
/**
* 绘制桃心
*/
drawHeart: function (pointX, pointY) {
var context = wx.createCanvasContext("canvas", this);
context.beginPath();//开始一个新的路径
context.translate(pointX, pointY);
// 控制心形大小
var size = this.data.radius / 20;
for (let i = 0; i < 30; i++) {
var step = i / 30 * (Math.PI * 2);//设置心上面两点之间的角度，具体分成多少份，好像需要去试。
var vector = {
x: (15 * Math.pow(Math.sin(step), 3))*size,
y: -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))*size
}
context.lineTo(vector.x, vector.y);
}
context.setFillStyle(this.data.fillColor)//设置填充颜色
context.setStrokeStyle(this.data.fillColor)//设置描边颜色
context.fill();
context.stroke();//对当前路径进行描边
context.closePath();//关闭当前路径
context.translate(-pointX, -pointY);
context.draw(true);
},
drawHeart2: function (pointX, pointY) {
var context = wx.createCanvasContext("canvas", this);
context.beginPath();//开始一个新的路径
// 将画布的原点（0,0），移动到(200,200)
// 移动原点是为了能让整个心形显示出来
context.translate(pointX, pointY);
// t 代表弧度
var t = 0;
// vt 代表 t 的增量
var vt = 0.01;
// maxt 代表 t 的最大值
var maxt = 2 * Math.PI;
// 需要循环的次数
var maxi = Math.ceil(maxt / vt);
// 保存所有点的坐标的数组
var pointArr = [];
// 控制心形大小
var size = this.data.radius/20;
// x 用来暂时保存每次循环得到的 x 坐标
var x = 0;
// y 用来暂时保存每次循环得到的 y 坐标
var y = 0;
// 根据方程得到所有点的坐标
for (var i = 0; i <= maxi; i++) {
// x=16 * (sin(t)) ^ 3;
var x = 16 * Math.pow(Math.sin(t), 3);
// y=13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t)
var y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);
t += vt;
pointArr.push([x * size, -y * size]);
}
// 根据点的坐标，画出心形线
context.moveTo(pointArr[0][0], pointArr[0][1]);
// 把每个点连接起来
for (var i = 1; i < pointArr.length; i++) {
x = pointArr[i][0];
y = pointArr[i][1];
context.lineTo(x, y);
}
context.setFillStyle(this.data.fillColor)//设置填充颜色
context.setStrokeStyle(this.data.fillColor)//设置描边颜色
context.fill();
context.stroke();//对当前路径进行描边
context.closePath();//关闭当前路径
context.translate(-pointX, -pointY);
context.draw(true);
},
colorRgb: function (sColor){
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange;
// return "RGB(" + sColorChange.join(",") + ")";
} else {
return sColor;
}
},
onUnload: function () {
clearInterval(this.interval)
}
})