前言

uniapp canvas刮刮乐 uniapp canvas 刮刮乐

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1.页面

代码如下（示例）：

<template><view class="canvasView"><view class="imgbox"><image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295848413,2583684724&fm=26&gp=0.jpg" mode=""></image><canvas class="canvas1" id="canvas1" canvas-id="canvas1" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas></view></view>
</template><script>export default {data() {return {viewWidth: 0,viewHeight: 0,ctx: null,x: [],y: [],points: []}},mounted() {this.drawInit()},methods: {touchstart(e) {let startX = e.changedTouches[0].x;let startY = e.changedTouches[0].y;let startPoint = {x: startX,y: startY};//存点 一起画this.points.push(startPoint);//每次触摸开始，开启新的路径Fthis.ctx.beginPath();},touchmove(e) {let moveX = e.changedTouches[0].xlet moveY = e.changedTouches[0].ylet movePoint = {x: moveX,y: moveY,}this.points.push(movePoint)if (this.points.length >= 2) {this.drawLine()}},touchend(e) {this.points = []// console.log(e, 'touchend');},// 获取元素宽高getViewHW() {let info = uni.createSelectorQuery().in(this).select(".imgbox");return new Promise((resolve, reject) => {info.boundingClientRect((data) => {this.viewWidth = data.widththis.viewHeight = data.heightresolve()}).exec(function(res) {// 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据})})},drawLine() {let points1 = this.points[0]let points2 = this.points[1]this.points.shift()this.ctx.moveTo(points1.x, points1.y)this.ctx.lineTo(points2.x, points2.y)this.ctx.stroke()this.ctx.draw(true)},async drawInit() {await this.getViewHW()this.ctx = uni.createCanvasContext('canvas1')let x = this.viewWidthlet y = this.viewHeight// let x = 400// let y = 400console.log(x, y);this.ctx.setFillStyle('#eeeeee')this.ctx.fillRect(0, 0, x, y)this.ctx.setFontSize(30)this.ctx.setTextBaseline('middle')this.ctx.setFillStyle('black')this.ctx.setTextAlign('center')this.ctx.fillText('刮刮乐刮刮乐刮刮乐', x / 2, y / 2)this.ctx.lineWidth = 4;this.ctx.lineCap = "round"this.ctx.lineJoin = "round"this.ctx.draw(true)//接下来线的样式this.ctx.lineWidth = 40; //刮的大小this.ctx.lineCap = "round"this.ctx.lineJoin = "round"this.ctx.globalCompositeOperation = 'destination-out' //关键是这个属性}}}
</script><style lang="scss" scoped>.canvasView {width: 100%;height: 100%;.imgbox {position: relative;margin-top: 100rpx;width: 100%;height: 950rpx;image {height: 100%;width: 100%;}.canvas1 {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}}}
</style>

效果展示

总结

1.uni.createSelectorQuery().in(this).select(".imgbox");
app真机调试获取元素宽高比h5慢
2.参考canvas签名效果实现刮刮乐，关键：
this.ctx.globalCompositeOperation = ‘destination-out’ 与h5的使用方式差不多

uniapp canvas 刮刮乐相关推荐

uni-app使用Canvas实现刮刮乐效果
uni-app使用canvas实现刮刮乐效果在uni-app中使用canvas比较简单,官方参考文档写的非常详细.但是uni-app使用canvas真的有很多坑,所有单独记录下自己的爬坑之旅. dr ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
H5 Canvas刮刮乐
玩游戏的人很多时候都会遇到翻牌子开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了其实很多时候在你点开那个 ...
html5 刮刮乐源码,HTML5 canvas实现刮刮乐功能
最近比较闲,除了在群里给大家交流交流,就没啥学习重心.看了论坛里的各种帖子,各种问题满天飞,这里我就整理了2个h5 canvas的demo,分享给大家! 使用html5的canvas实现刮刮乐功能舍 ...
canvas之刮刮乐
canvas之刮刮乐 canvas合成说到刮刮乐,先让我们了解一下canvas合成. 透明度合成 globalAlpha globalAlpha 就是全局对象的透明度,全局对象就是canvas 的上 ...
使用Canvas制作刮刮乐，看看你能刮出什么奖品来？
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言今天在一个彩票网站看到了一个刮刮乐的效果,觉得挺有意思的就打算来仿写一个,经过一番简单的思考大概就有了基本都想法.总体效果使用Can ...
canvas实现简单的刮刮乐功能
canvas实现刮刮乐效果平时浏览一些购物网站常常有一些抽奖的环节它们就会使用一种刮刮乐的形式给用户发一些优惠券或者其它的一些奖品,对此突然产生了些许兴趣于是就琢磨着该如何实现,最终还是选择了can ...
html5中canvas画布实现手机端和移动端的刮刮乐效果
用html5中的canvas实现刮刮乐的效果使用html+css实现背景的样式使用clearRect()方法实现挂去的作用手机端使用addEventListener()监听手机端滑动事件tou ...
【Android界面实现】使用Canvas对象实现“刮刮乐”效果
在淘宝.京东等电商举办活动的时候,经常可以看到在移动客户端推出的各种刮奖活动,而这种活动也受到了很多人的喜爱.从客户端的体验来说,这种效果应该是通过网页来实现的,那么,我们使用Android的自带控件 ...
简单的Canvas刮刮乐带动画效果的实例
今天做了个刮刮乐领奖品的小活动,感觉挺有用的,整理在这儿记录下上个效果图先: 加了个简单的 css 动画效果下面贴上主要代码: index.html <!DOCTYPE html> & ...

uniapp canvas 刮刮乐

前言

一、使用步骤

1.页面

效果展示

总结

uniapp canvas 刮刮乐相关推荐

最新文章

热门文章