付费网站怎么做,网站内容设计模板,室内设计找图片的网站,wordpress 漏洞最近给湖南中烟做元春活动#xff0c;一个月要开发4个小活动#xff0c;这个是其中一个难度一般#xff0c;最难的是一个类似鲤鱼跃龙门的小游戏#xff0c;哎#xff0c;真实为难我这个“拍黄片”的。下面是主要代码。 canvas :style{width:widthpx,height:hei…
最近给湖南中烟做元春活动一个月要开发4个小活动这个是其中一个难度一般最难的是一个类似鲤鱼跃龙门的小游戏哎真实为难我这个“拍黄片”的。下面是主要代码。 canvas :style{width:widthpx,height:heightpx} canvas-idmyCanvas idmyCanvastouchstarttouchstart touchendtouchend touchmovetouchmove/canvasscriptimport {setShareConfig} from ./shareexport 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); // 填充的文本文字xythis.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以操作组件内 canvas 组件。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
