canvas 简易刮刮卡效果

我就是我 2023-03-06 05:51 14阅读 0赞

思路:

1.  设置画布
2.  随机生成卡片内容. 注意是随机
3.  使用图层覆盖卡片内容
4.  鼠标拖动实现刮卡效果

<body> 
         
        <canvas id="pic" style="border:solid 1px #ccc"></canvas>
    
        <script type="text/javascript"> // 获取画布元素 const pic = document.getElementById("pic"); // 获取工具集 const pic_tools = pic.getContext("2d"); // 2. 随机生成卡片内容渲染到画布上 // 定义中奖信息的数组 let giftsArr = ['一等奖','二等奖','三等奖','再接再厉']; // 随机生成一个中奖信息 let giftsRan = giftsArr[Math.floor(Math.random()*giftsArr.length)]; pic_tools.font = 'bold 20px 黑体'; // 设置字体 pic_tools.textAlign = 'center'; // 水平居中 pic_tools.textBaseLine = 'middle'; // 垂直居中 pic_tools.fillStyle = 'red' // 填充字体为红色样式 // 将获取的中奖信息绘制到画布中间 pic_tools.fillText(giftsRan, pic.width/2,pic.height/2); // 3. 使用灰色矩形覆盖中奖信息 // 将绘制的中奖信息另存为图片, 并作为画布元素的背景图片 let imgUrl = pic.toDataURL('image/png',1); pic.style.background = 'url('+imgUrl+')'; // 绘制矩形盖住中奖信息 // 把原先没擦干净的清除掉 pic_tools.clearRect(0,0,pic.width,pic.height); // 设置新矩形的颜色 pic_tools.fillStyle = '#ccc'; // 绘制盖住的区域 pic_tools.fillRect(0,0,pic.width,pic.height) // 4. 使用鼠标滑擦区域实现刮刮效果 // 设置一个变量控制绘制的触发 let flag = false; pic.addEventListener("mousedown",function() { flag = true; // 设置一个全局属性, 将绘制后的区域变成透明 pic_tools.globalCompositeOperation = 'destination-out'; }) // 在鼠标移动时不断绘制固定宽高的正方形 pic.addEventListener("mousemove",function(e) { if(flag) { // 得到鼠标移动的x,y坐标 let x = e.clientX let y = e.clientY pic_tools.fillRect(x,y,30,30) // 移动到哪, 哪里就绘制出一个小正方形 } // 鼠标弹起时不触发小正方形的绘制 pic.addEventListener("mouseup",function() { flag = false }) }) </script>

--------------------

可优化地方:  
矩形左上角和上部的边缘处不容易刮到  
做一下节流优化