使用到uniapp的
canvas组件
createCanvasContext 创建 canvas 绘图上下文
canvasGetImageData
CanvasContext
仿刮刮乐开奖效果
<template><view class=""><view class="content"><view class="value" v-show="readyState">大吉大利view><canvas :style="{'width':width+'px','height':height+'px'}" canvas-id="myCanvas" id="myCanvas"@touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">canvas>view><button @click="reset">重置button>view>template><script>export default {data() {return {ctx: null,width: 0,height: 0,disabled: false, // 是否禁止刮卡readyState: false, // 是否开始绘制endState: false, // 结束刮卡状态watermark: '刮一刮', // 水印文字watermarkColor: '#c5c5c5', // 水印文字颜色watermarkSize: 14, // 水印文字大小title: '刮一刮开奖', // 提示文字titleColor: '#888', // 提示文字颜色titleSize: 24, // 提示文字大小startX: 0, // 触摸x轴位置startY: 0, // 触摸y轴位置touchSize: 20, // 触摸画笔大小percentage: 50, // 刮开百分之多少的时候开奖}},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()})},methods: {init() {this.endState = false;this.readyState = false;this.ctx.clearRect(0, 0, this.width, this.height); // 清除画布上在该矩形区域内的内容(x,y,宽，高)。this.ctx.setFillStyle('#ddd'); // 填充颜色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;while ((x <= this.width * 5 || y <= this.height * 5) && i < 300) {this.ctx.setFillStyle(this.watermarkColor); // 填充颜色this.ctx.setFontSize(this.watermarkSize); // 设置字体的字号this.ctx.fillText(this.watermark, x, y); // 填充的文本（文字，x，y）x += width + width * 1.6;if (x > this.width && y <= this.height) {x = -Math.random() * 100;y += this.watermarkSize * 3;}i++;}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.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);uni.showToast({icon: 'none',title: '开奖完成',});},// 重置reset(){this.init();},}}
script><style scoped lang="scss">.content {width: 300rpx;height: 120rpx;margin: auto ;position: relative;display: flex;align-items: center;justify-content: center;.value {color: red;font-size: 32rpx;font-weight: bold;position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}}
style>
