广州网站建设总结,创建公司网站免费,网站 开发 工具,网站开发需要什么人才使用canvas画布画出刮刮乐要被刮的图片#xff0c;使用移动清除画布。
当前代码封装为刮刮乐的组件#xff1b;
vue代码#xff1a;
templateview classpage v-ifmerchantInfo.cdn_staticimage classbg :src使用移动清除画布。
当前代码封装为刮刮乐的组件
vue代码
templateview classpage v-ifmerchantInfo.cdn_staticimage classbg :srcmerchantInfo.cdn_static statistics/luckDrawImg/scratchcard/page_bg.png modeaspectFill/imageview classcontentview classlogoimage :srcmerchantInfo.logo modeheightFix/image/viewview classtitleimage :srcmerchantInfo.cdn_static statistics/luckDrawImg/scratchcard/title.png modeheightFix/image/viewview classnotificationview/viewtext每日刮卡抽好礼/textview/view/viewview classboximage classscrapingBg :srcmerchantInfo.cdn_static statistics/luckDrawImg/scratchcard/scrapingBg.png/imageview classscrapingBoxview classscrapingBoxContent!-- 奖品名称 --!-- view{{ prizeTitle || }}/view --!-- 奖品图片 --image :srcmerchantInfo.cdn_static prizeUrl/imagecanvas :style{width:widthpx,height:heightpx} styleposition: absolute; top: 0; canvas-idmyCanvas idmyCanvas touchstarttouchstart touchendtouchend touchmovetouchmove/canvas/view/view/viewview classcountview classtip您今天还有text{{total}}/text次抽奖机会/view/viewview classbtnsview classbtn clickgetRuleimage classbtnImg :srcmerchantInfo.cdn_static statistics/luckDrawImg/scratchcard/rule.png/imageview classbtnConentimage :srcmerchantInfo.cdn_static statistics/luckDrawImg/scratchcard/ruleIcon.png/imagetext查看规则/text/view/viewview classbtn clickgetResult()image classbtnImg :srcmerchantInfo.cdn_static statistics/luckDrawImg/scratchcard/prize.png/imageview classbtnConentimage :srcmerchantInfo.cdn_static statistics/luckDrawImg/scratchcard/prizeIcon.png/imagetext兑换福利/text/view/view/view/viewview classwin v-ifrule_showscroll-view scroll-y classwin_box .win_box_bgmp-html :contentluckDrawInfo.rule //scroll-viewtext classiconfont iconcolseIcon theme-font-white clickrule_showfalse/text/viewview classwin v-ifresult_showview classwin_box1image classwin_bg :srcmerchantInfo.cdn_static statistics/luckDrawImg/result_bg.png mode/imageview classwin_contentview classwin_tips theme-font-white{{currentPrize.desc}}/viewview classwin_title{{currentPrize.title}}/viewview classwin_btn clickchoiseAddress(){{currentPrize.is_address1?选择地址:确定}}/view/view/view/viewview classwin v-ifprize_showview classwin_tit theme-font-white我的奖品/viewview classwin_box2view classitemsview classleft i_title奖品/viewview classright i_title中奖时间/view/viewscroll-view scroll-y classlistview classitem v-for(item,index) in list :keyindexview classleft{{item.lottery_prize_title}}/viewview classright v-ifitem.is_address1!item.address_idview classr_btn clickchoiseAddress1(item)去领奖/view/viewview classright v-else{{item.created_time}}/view/view/scroll-view/viewtext classiconfont iconcolseIcon theme-font-white clickprize_showfalse/text/view/view/templatescriptimport { luckDrawInfo } from /api/luckDraw.js;import colors from /mixins/color;export default {mixins: [colors],data() {return {//https://cdn.dev.scrm.juplus.cn/InQLzDLoAl2S9LyNJUXQ45gpA.pngmask: true,wtf:true,luckDrawInfo: {},rule_show:false,result_show:false,prize_show:false,total:0,currentPrize:{},list:[],id: ,prizeTitle: ,prizeUrl: ,filePath: ,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: 30, // 触摸画笔大小percentage: 50, // 刮开百分之多少的时候开奖}},props: {userId: {type: [Number,String]},type:{type: [Number,String]}},//渲染完了mounted() {this.id this.userId;this.init();this.$nextTick(() {let content uni.createSelectorQuery().in(this).select(.scrapingBoxContent);content.boundingClientRect((data) {this.width data.width;this.height data.height;this.ctx uni.createCanvasContext(myCanvas, this);uni.getImageInfo({src: this.merchantInfo.cdn_static statistics/luckDrawImg/scratchcard/scratchingBefore.png,success: (res) {this.filePath res.path;this.drawInit();}})}).exec()})}, methods: {drawInit(imgUrl) {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); // 填充的文本文字xy// 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); // 填充的文本文字xy/*** 绘制图片*/ this.ctx.drawImage(this.filePath, 0, 0, this.width, this.height); this.ctx.draw(); // 将之前在绘图上下文中的描述路径、变形、样式画到 canvas 中。this.readyState true; // 完成绘制},// 手指触摸动作开始touchstart(e) {if (this.disabled || this.endState) {return;}this.startPlay();this.startX e.touches[0].x;this.startY e.touches[0].y;},// 手指触摸后移动touchmove(e) {if (this.disabled || this.endState) return;if (!this.prizeTitle) return;if (!this.prizeUrl) 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.scrapingSuccess();}},fail: (e) {console.log(e);},}, this);},// 成功清除所有图层scrapingSuccess(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);// 弹出奖品setTimeout((){this.result_show true;this.drawInit();this.wtf true;this.prizeTitle ;this.prizeUrl ;},800)},init(){if(this.userInfo){this.getInfo()}else{setTimeout((){this.init()},500)}},getInfo(){luckDrawInfo.getDetail({id:this.id}).then(res {this.luckDrawInfores.datathis.totalres.data.my_can_numthis.action(lottery,this.id,0,2,this.luckDrawInfo.title,,lottery)})},choiseAddress(){this.currentPrize.is_address1?uni.navigateTo({url:/pages/address/address}):this.result_showfalse},choiseAddress1(data){this.currentPrizedatauni.navigateTo({url:/pages/address/address})this.prize_showfalse},setAddress(id){luckDrawInfo.setAddress({address_id:id,history_id:this.currentPrize.history_id||this.currentPrize.id}).then(res {uni.showToast({title:地址设置成功,icon:none})})},getRule(){this.scrapingSuccess();setTimeout((){this.rule_show true;},800)},getResult(){// if(!this.wtf){// return false// }this.scrapingSuccess();luckDrawInfo.getResult({lottery_id:this.id}).then(res {this.listres.data.datathis.prize_showtrue})},// 点击开始,请求接口抽奖startPlay(index) {if(this.luckDrawInfo.is_register1!this.userInfo.type){uni.navigateTo({url:/pages/login/login})return false}if(this.luckDrawInfo.is_form1this.luckDrawInfo.user_form_count0){uni.navigateTo({url:/pages/form/form?idthis.luckDrawInfo.form_idtype_id this.id typelottery})return false}if(!this.wtf){return false}// 活动未开始或活动已结束let startTimeMs new Date(this.luckDrawInfo.start_time).getTime();let endTimeMs new Date(this.luckDrawInfo.end_time).getTime();let nowTimeMs new Date().getTime();if (nowTimeMs startTimeMs) {uni.showToast({icon: none,title: 活动未开始})return false;}if (nowTimeMs endTimeMs) {uni.showToast({icon: none,title: 活动已结束})return false;}this.mask false;this.wtf false;luckDrawInfo.run({id:this.id}).then(res {this.currentPrize res.data;this.total res.data.row_lottery_new.my_can_num;this.prizeTitle res.data.title;this.prizeUrl res.data.img;}).catch(err {this.wtf true;});}}}
/scriptstyle scoped langscssimport index.scss;/**/
/style
scss代码 .page{width: 750rpx;height: 100vh;position: relative;
}.bg{width: 750rpx;height: 100vh;
}.content{width: 750rpx;min-height: 100vh;height: 1448rpx;position: absolute;top: 0;left: 0;
}.logo{height: 60rpx;display: flex;justify-content: center;margin-top: 90rpx;image{height: 60rpx;}
}.title{height: 254rpx;display: flex;justify-content: center;margin-top: 20rpx;image{width: 640rpx;height: 254rpx;}
}.notification{width: 370rpx;height: 56rpx;display: flex;justify-content: space-between;align-items: center;margin: -60rpx auto 0 auto;view{width: 26rpx;height: 4rpx;background-color: #fff;}text{font-size: 38rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FFFFFF;}
}.box{width: 658rpx;height: 422rpx;margin: 110rpx auto 0 auto;position: relative;.scrapingBg{width: 100%;height: 100%;}.scrapingBox{width: 100%;height: 100%;position: absolute;left: 0;top: 0;box-sizing: border-box;padding: 52rpx 62rpx;.scrapingBoxContent{width: 536rpx;height: 318rpx;z-index: 2;position: relative;image{width: 100%;height: 100%;}view {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 100rpx;color: #1B9AF9;text-shadow: 0px 4px 8px rgba(149,216,255,0.5);}}}
}.count{display: flex;justify-content: center;margin-top: 44rpx;.tip{font-size: 28rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #777777;text{color: #0039AF;}}
}.btns{display: flex;align-items: center;justify-content: space-between;margin-top: 26rpx;
}.btn{width: 376rpx;height: 166rpx;position: relative;.btnImg{width: 100%;height: 100%;}.btnConent{width: 100%;position: absolute;top: 50%;transform: translateY(-100%);display: flex;justify-content: center;align-items: center;image{width: 42rpx;height: 42rpx;margin-right: 12rpx;}text{font-size: 42rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FFFFFF;}}}.win{width: 750rpx;height: 100vh;background: rgba(0, 0, 0, 0.8);position: fixed;top: 0;left: 0;z-index: 2;display: flex;flex-direction: column;align-items: center;justify-content: center;
}.win_box{width: 662rpx;height: 60%;padding: 40rpx;box-sizing: border-box;border-radius: 24rpx;
}.win_box_bg{background: #C3E5FE;
}.bg3{background: #C3E5FE;
}.iconcolseIcon{font-size: 58rpx;margin-top: 98rpx;
}.win_box1{width: 630rpx;height: 922rpx;position: relative;
}.win_bg{width: 630rpx;height: 922rpx;
}.win_content{width: 630rpx;height: 922rpx;position: absolute;left: 0;top: 0;display: flex;flex-direction: column;align-items: center;
}.win_tips{font-size: 48rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;margin-top: 290rpx;
}.win_title{font-size: 48rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;color: #FE6631;margin: 170rpx 0;
}.win_btn{width: 280rpx;height: 80rpx;line-height: 80rpx;text-align: center;background: #FFE047;border-radius: 46rpx;font-size: 32rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;color: #13112C;
}.win_tit{font-size: 48rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;margin-bottom: 32rpx;
}.win_box2{width: 662rpx;height: 900rpx;background: #FFFFFF;border-radius: 24rpx;display: flex;flex-direction: column;
}.items{width: 662rpx;height: 108rpx;background: #C3E5FE;border-radius: 24rpx 24rpx 0rpx 0rpx;display: flex;align-items: center;flex-shrink:0
}.left,.right{width: 50%;text-align: center;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;
}.i_title{font-size: 36rpx;
}.list{height: 792rpx;padding-bottom: 20rpx;overflow: hidden;
}.item{width: 662rpx;height: 88rpx;display: flex;align-items: center;justify-content: space-around;
}.item:nth-child(2n){background-color: #F4F4F4;
}.r_btn{width: 160rpx;height: 60rpx;line-height: 60rpx;text-align: center;background: #FFC659;border-radius: 46rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;font-size: 32rpx;margin:0 auto;
}
效果:
