效果图
完整代码↓
<div class="container" id="canvasTop"><div class="award_box"><div class="award" v-if="showPrize"><div class="title">奖品名称</div></div><canvas id="theCanvas" class="canvas" @touchmove="touchmove" @touchstart="touchstart"@touchend="touchend" v-show="!isScratch"></canvas></div></div>
<script lang="ts">export default class Index extends Vue {private drawCloth: any = ""; //画布private ctx: any = ""; //画笔private ismousedown: boolean = false; //标志用户是否按下鼠标或开始触摸private fontem: any = "26"; // 获取html字体大小private isScratch: boolean = false; // 是否刮过卡private showPrize: boolean = false // 显示奖品mounted() {this.getCavas()}// 初始化画布getCavas(): void {//这是为了不同分辨率上配合@media自动调节刮的宽度this.drawCloth = document.getElementById("theCanvas");//这里很关键，canvas自带两个属性width、height,我理解为画布的分辨率，跟style中的width、height意义不同。//最好设置成跟画布在页面中的实际大小一样//不然canvas中的坐标跟鼠标的坐标无法匹配this.drawCloth.width = this.drawCloth.clientWidththis.drawCloth.height = this.drawCloth.clientHeight;this.ctx = this.drawCloth.getContext("2d");this.initCanvas();}// 画刮刮卡initCanvas(): void {this.ctx.globalCompositeOperation = "source-over";this.ctx.fillStyle = "#aaa";this.ctx.fillRect(0, 0, this.drawCloth.clientWidth, this.drawCloth.clientHeight);this.ctx.fill();this.ctx.font = "Bold 22px Arial";this.ctx.textAlign = "center";this.ctx.fillStyle = "red";this.ctx.fillText("刮刮乐，刮开有奖", this.drawCloth.width / 2, 60);//有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法this.ctx.globalCompositeOperation = "destination-out";}//点击到了刮刮乐touchstart(e: any): void {e.preventDefault();this.ismousedown = true;}// 检测到手放开了touchend(e: any): void {e.preventDefault();//得到canvas的全部数据var a = this.ctx.getImageData(0, 0, this.drawCloth.width, this.drawCloth.height);var j = 0;for (var i = 3; i < a.data.length; i += 4) {if (a.data[i] == 0) j++;}//当被刮开的区域等于一半时，则可以开始处理结果if (j >= a.data.length / 8) {this.isScratch = true;}this.ismousedown = false;}// 检测到在刮touchmove(e: any): void {this.showPrize = truee.preventDefault();if (this.ismousedown) {if (e.changedTouches) {e = e.changedTouches[e.changedTouches.length - 1];}let topD = document.getElementById("canvasTop") as HTMLInputElement;var topY = topD.offsetTopvar oX = this.drawCloth.offsetLeft,oY = this.drawCloth.offsetTop + topY;var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0,y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;//画360度的弧线，就是一个圆，因为设置了ctx.globalCompositeOperation = 'destination-out';//画出来是透明的this.ctx.beginPath();this.ctx.arc(x, y, this.fontem * 0.5, 0, Math.PI * 2, true); // 调整画笔的大小//下面3行代码是为了修复部分手机浏览器不支持destination-out//我也不是很清楚这样做的原理是什么this.drawCloth.style.display = 'none';this.drawCloth.offsetHeight;this.drawCloth.style.display = 'inherit';this.ctx.fill();}}}</script>
.container {width: 100%;overflow: hidden;.award_box {width: 100%;height: 200px;display: flex;align-items: center;background: #fff;// background: url("/it/u=672591244,2458251534&fm=26&fmt=auto") no-repeat center /100%;position: relative;.award {width: 100%;position: absolute;left: 0;.title {font-size: 32px;text-align: center;width: 100%;font-weight: bold;overflow: hidden;text-overflow: ellipsis;color: #006c4a;}}.canvas {position: relative;width: 750px;height: 200px;}}}
如果觉得《Vue使用画布Canvas实现刮刮乐》对你有帮助，请点赞、收藏，并留下你的观点哦！
