刮刮卡 vue canvas

效果如下：

<template><div class="canvas-content"><div id="content" class="canvas-container-vertical"><img src="../img/test.jpg" alt="" id="lapm"><canvas id="signCanvas"></canvas></div></div>
</template>
<script>
export default {data() {return {imgsrc: '',type: 0,}},mounted() {this.greenType();},methods: {// 横屏和竖屏下的展示不一样的样式greenType() {this.initCanvas(window.orientation);},// 初始化画布initCanvas(type) {let contentBox=document.getElementById('content');let oCanvas = document.getElementById('signCanvas');oCanvas.width = contentBox.clientWidth;oCanvas.height = contentBox.clientHeight;// 获取画布绘图环境let ctx = oCanvas.getContext('2d');// 设置画布绘图背景色ctx.fillStyle = "#ccc";// // 使用fillStyle属性所指的颜色.渐变或模式来填充指定的矩形ctx.fillRect(0, 0, oCanvas.width, oCanvas.height);// 设置填充文本的字体样式ctx.fillStyle = "#fff"ctx.font = "30px Arial"// 根据设置的样式填充文字ctx.fillText('刮一刮', oCanvas.width/2-40,oCanvas.height/2);/*  画布填充图片let img = new Image();img.src = require('../img/test1.jpg');img.width= oCanvas.width;img.height = oCanvas.height;img.οnlοad=function(e){let pattern=ctx.createPattern(img,'no-repeat')ctx.fillStyle=pattern;ctx.fillRect(0,0,oCanvas.width,oCanvas.height)}*///手指接触屏幕oCanvas.addEventListener('touchstart',function(ev){ev=ev||event;let touchC=ev.changedTouches[0];//拿第一根手指//获取手指接触屏幕的坐标 clientX手指相对于屏幕左侧坐标，clientY手指相对于屏幕顶部坐标//offsetLeft相对于定位为absolute的父元素的左侧坐标，offsetTop相对于定位为absolute的父元素的顶部坐标， // 逐级向上找absolute父级，如果没有这样的父级以body为准let x=touchC.clientX-contentBox.offsetLeft; //获取到手指相对于contentBox左侧的坐标let y=touchC.clientY-contentBox.offsetTop;  //获取到手指相对于contentBox顶部的坐标ctx.save(); // 保存当前环境的状态。//只留下目标超过源的部分ctx.globalCompositeOperation='destination-out'// 设置划线的大小ctx.lineWidth=30;// lineCap 属性设置或返回线条末端线帽的样式。 butt    默认。向线条的每个末端添加平直的边缘。ctx.lineCap="butt";// lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时。miter   默认。创建尖角。ctx.lineJoin="miter";// miterLimit 属性设置或返回最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。ctx.miterLimit= 5;// 起始一条路径，或重置当前路径。ctx.beginPath();//只能画线，用线模拟圆ctx.moveTo(x,y);ctx.lineTo(x+1,y+1);// 绘制已定义的路径。ctx.stroke();// 返回之前保存过的路径状态和属性。ctx.restore();});oCanvas.addEventListener('touchmove',function(ev){ev=ev||event;let touchC=ev.changedTouches[0];//拿第一根手指//获取手指接触屏幕的坐标let x=touchC.clientX-contentBox.offsetLeft;let y=touchC.clientY-contentBox.offsetTop;ctx.save();ctx.globalCompositeOperation='destination-out'ctx.lineWidth=30;ctx.lineCap="butt";ctx.lineJoin="miter";ctx.miterLimit= 5;ctx.lineTo(x+1,y+1);ctx.stroke();ctx.restore();});let flag=0;//手指离开屏幕oCanvas.addEventListener('touchend',function(){let imgdatga=ctx.getImageData(0,0,oCanvas.width,oCanvas.height);//拿到所有的像素let allPx=imgdatga.width*imgdatga.height;console.log(imgdatga);for(let i=0;i<allPx;i++){if(imgdatga.data[4*i+3]==0){flag++;}}//如果划开的像素大于整个canvas的一半，就让canvas的透明度为0，让图片显示出来if(flag>=allPx/2){oCanvas.style.opacity=0;}//过渡执行完，透明度为0，就把canvas在页面上删除oCanvas.addEventListener('transitionend',function(){this.remove();//删除canvas});});},}
}
</script>
<style lang="less" scoped>.canvas-content {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 1111111;background: #bbb;.vertical-text {p {color: #ddd;font-size: 20px;margin: 40px 0;text-align: center;}}.canvas-operation {width: 100%;height: 40px;position: fixed;bottom: 0;left: 0;z-index: 111111111;background: #ccc;button {width: 70px;height: 40px;background: #aaa;margin: 0 10px;outline: none;&:active {background: #888;}}}.canvas-container {position: fixed;top: 0;left: 0;right: 0;bottom: 40px;background: green;#signCanvas {width: 100%;height: calc(100% - 40px);background: #fff;border: none;box-sizing: border-box;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 1111111112;}}.canvas-container-vertical {width: 100%;height: 300px;position: relative;top: 0;left: 0;font-size: 32px;color: red;line-height: 300px;text-align: center;#lapm {width: 100%;height: 100%;}#signCanvas {width: 100%;height: 100%;// background: #fff;border: none;box-sizing: border-box;overflow: hidden;position: absolute;top: 0;left: 0;bottom: 40px;z-index: 1111111112;}}}
</style>

刮刮卡 vue canvas相关推荐

canvas绘制刮刮卡
无图不欢,先上图 <!DOCTYPE html> <html> <head><meta name="keywords" content=& ...
canvas实现刮刮卡，vue3实现
效果图: 主要属性:globalCompositeOperation 代码: <template><div class="guaguaka" id="g ...
Vue使用画布Canvas实现刮刮乐
效果图完整代码↓ <div class="container" id="canvasTop"><div class="award_ ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
canvas绘制刮刮卡，超过一定面积显示全图
说明:栗子转自简书,在他的基础上添加了重置和超过一定面积显示全图,仅做学习使用.(推荐7.2的代码) 1.前端时间做的一个项目需要支持多终端,网页版需要使用html5中canvas画布对象对一组数据进 ...
用canvas实现刮刮卡特效
canvas(画布)应用十分广泛,不仅可用来画图,配合ECharts做表格,还能做游戏．不过这次分享一下用canvas实现刮刮卡特效的一个应用．如果还不是很了解canvas基本知识,可以读一下我的相 ...
canvas刮刮卡游戏开发
canvas刮刮卡游戏开发先看效果: 一.基础知识-画布元素的使用 1 绘制线条思路在页面中添加画布元素获取画布元素的上下文环境对象使用上下文环境对象绘制图形,保存在内存中绘制一个线条 / ...
canvas实现刮刮卡
<canvas id="canvas" width="400" height="100"></canvas> < ...
用Canvas实现刮刮卡功能的研究与实践
前几天,单位老刘让我研究一下网上最近很流行的"刮刮卡"是怎么实现的,我第一时间就想起了我媳妇曾经跟我说过的:"在HTML5中Canvas的绘图能力很强大" ...
HTML用画布实现刮刮卡,利用HTML5的画布Canvas实现刮刮卡效果_javascript技巧
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...

刮刮卡 vue canvas

刮刮卡 vue canvas相关推荐

最新文章

热门文章