uniapp canvas做的刮刮乐解决蒙层能自定义图片
最近给湖南中烟做元春活动，一个月要开发4个小活动，这个是其中一个难度一般，最难的是一个类似鲤鱼跃龙门的小游戏，哎，真实为难我这个“拍黄片”的。下面是主要代码。
<canvas :style="{'width':width+'px','height':height+'px'}" canvas-id="myCanvas" id="myCanvas"
@touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">
canvas>
<script>
import {
setShareConfig
} from './share'
export default {
data() {
return {
rewardList:{},
textBoxFont: '',
textBoxBt: '',
textBoxState: false,
touchStartState:true,
tishiState:false,
clickState:false,
activity: {},
reward:{
"reward_icon": "",
"reward_img": ""
},
seckillContent: '',
prizeBoxState: false,
count: 0, // 初始值为10秒
readState: false,
myPrizeState: false,
ctx: null,
width: 0,
height: 0,
chance_count: 0, //剩余次数
validTime: '', //有效时间
disabled: true, // 是否禁止刮卡
readyState: false, // 是否开始绘制
endState: false, // 结束刮卡状态
watermark: '', // 水印文字
watermarkColor: '#c5c5c5', // 水印文字颜色
watermarkSize: 14, // 水印文字大小
title: '', // 提示文字
titleColor: '#888', // 提示文字颜色
titleSize: 24, // 提示文字大小
startX: 0, // 触摸x轴位置
startY: 0, // 触摸y轴位置
touchSize: 40, // 触摸画笔大小
percentage: 70, // 刮开百分之多少的时候开奖
}
},
onShow() {
this.$nextTick(() => {
let content = uni.createSelectorQuery().select(".content");
content.boundingClientRect((data) => {
this.width = data.width;
this.height = data.height;
this.ctx = uni.createCanvasContext('myCanvas', this);
setTimeout(e => {
this.init();
}, 20);
}).exec()
})
},
onLoad: function(options) {
},
methods: {
convertSecToDHMS(seconds) {
var days = Math.floor(seconds / (24 * 60 * 60));
seconds %= (24 * 60 * 60);
var hours = Math.floor(seconds / (60 * 60));
seconds %= (60 * 60);
var minutes = Math.floor(seconds / 60);
var seconds = seconds % 60;
if (this.res.is_end) {
return {
days: 0,
hours: 0,
minutes: 0,
seconds: 0
};
}
return {
days: days,
hours: hours,
minutes: minutes,
seconds: seconds
};
},
readHide() {
if (this.count == 0) {
this.readState = false;
}
},
convertSecToDHMS(seconds) {
var days = Math.floor(seconds / (24 * 60 * 60));
seconds %= (24 * 60 * 60);
var hours = Math.floor(seconds / (60 * 60));
seconds %= (60 * 60);
var minutes = Math.floor(seconds / 60);
var seconds = seconds % 60;
if (this.res.activity.difference_time <= 0) {
return {
days: 0,
hours: 0,
minutes: 0,
seconds: 0
};
}
return {
days: days,
hours: hours,
minutes: minutes,
seconds: seconds
};
},
init() {
this.endState = false;
this.readyState = false;
this.ctx.clearRect(0, 0, this.width, this.height); // 清除画布上在该矩形区域内的内容(x,y,宽，高)。
this.ctx.setFillStyle('rgba(255, 255, 255, 0.5)'); // 填充颜色
this.ctx.fillRect(0, 0, this.width, this.height); // 填充区域（x,y,宽,高）
/**
* 绘制文字水印
*/
var width = this.watermark.length * this.watermarkSize;
this.ctx.save(); // 保存当前的绘图上下文。
//this.ctx.rotate(-10 * Math.PI / 180); // 以原点为中心，原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。
let x = 0;
let y = 0;
let i = 0;
//自定义蒙层图片
this.ctx.drawImage('../../static/jhy/ycsm/guazhi.png', 0, 0, this.width, this.height);
this.ctx.restore(); // 恢复之前保存的绘图上下文。
/**
* 绘制标题
*/
this.ctx.setTextAlign("center"); // 用于设置文字的对齐
this.ctx.setTextBaseline("middle"); // 用于设置文字的水平对齐
this.ctx.setFillStyle(this.titleColor); // 填充颜色
this.ctx.setFontSize(this.titleSize); // 设置字体的字号
this.ctx.fillText(this.title, this.width / 2, this.height / 2); // 填充的文本（文字，x，y）
this.ctx.draw(); // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
this.readyState = true; // 完成绘制
},
// 手指触摸动作开始
touchstart(e) {
if (this.disabled || this.endState) {
return;
}
this.startX = e.touches[0].x;
this.startY = e.touches[0].y;
},
// 手指触摸后移动
touchmove(e) {
// if (this.chance_count <= 0) {
// return;
// }
if (this.disabled || this.endState) {
return;
}
this.ctx.clearRect(this.startX, this.startY, this.touchSize, this.touchSize); // 清除画布上在该矩形区域内的内容(x,y,宽，高)。
this.ctx.draw(true); // false:本次绘制是否接着上一次绘制，true:保留当前画布上的内容
//记录移动点位
this.startX = e.touches[0].x;
this.startY = e.touches[0].y;
},
// 手指触摸动作结束
touchend(e) {
if (this.disabled || this.endState) {
return;
}
// 返回一个数组，用来描述 canvas 区域隐含的像素数据，在自定义组件下，第二个参数传入自定义组件实例 this，以操作组件内
uni.canvasGetImageData({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: this.width,
height: this.height,
success: (res) => {
console.log(res);
let pixels = res.data;
let transPixels = [];
for (let i = 0; i < pixels.length; i += 4) {
if (pixels[i + 3] < 128) {
transPixels.push(pixels[i + 3]);
}
}
var percent = (transPixels.length / (pixels.length / 4) * 100).toFixed(2);
if (percent >= this.percentage) {
this.success();
}
},
fail: (e) => {
console.log(e);
},
}, this);
},
// 成功，清除所有图层
success: function(e) {
if (this.endState) {
return;
}
this.endState = true;
this.ctx.moveTo(0, 0); // 把路径移动到画布中的指定点，不创建线条。用 stroke() 方法来画线条。
this.ctx.clearRect(0, 0, this.width, this.height); // 清除画布上在该矩形区域内的内容(x,y,宽，高)。
this.ctx.stroke(); // 画出当前路径的边框。默认颜色色为黑色。
this.ctx.draw(true);
this.prizeBoxState = true;
},
// 重置
reset() {
this.init();
},
}
}
</script>