刮刮卡效果实现

时间：2023-04-02 21:53:13 HTML

#app1{width:300px;height:100px;position:relative;border:1pxsolid#f00;}#app1Content{width:300px;height:100px;position:absolute;left:0;top:0;z-index:1}#app1Mark{width:300px;height:100px;position:absolute;left:0;top:0;z-索引：2}公司在国庆节组织了一次小型的抽卡抽奖活动。彩票需要刮刮卡的效果，我感觉用css是做不到的。看我是如何用canvas实现刮刮卡效果的。废话不多说，jsrun-test地址和lilnong.top-test地址实现方案的在线效果如何？clearRect这是我找到的第一个API，作用是清除矩形区域内的内容。缺点是矩形globalCompositeOperation是基于以上缺点。我发现它的destination-out正是我所需要的。它的作用是改变画布图形的混合模式。我们期望什么功能？底部内容可以自定义（我们可以直接让画布浮在内容上）定义遮罩颜色（canvas绘制画布并设置颜色context.fillStyle=color;）自定义遮罩图像（使用drawImage绘制画布）自定义strokeclearRect为矩形圆弧配合globalCompositeOperation实现圆形drawImage配合globalCompositeOperation自定义Brushstrokeautoscrape&autoscrapetrackgeneratorScratcharearatioBottomcontentcustomization两个选项没有太大区别，可以根据需要选择根据您的个人喜好。解决方案1DOM级别（具有更多功能）效果view-portal#app1{width:300px;height:100px;position:relative;border:1pxsolid#f00;}#app1Content{width:300px;height:100px;position:absolute;left:0;top:0;z-index:1}#app1Mark{width:300px;height:100px;position:absolute;left:0;top:0;z-索引：2}我是自定义内容

方案2画布背景图（使用简单）效果view-portal#app2{width:300px;height:100px;position:relative;border:1pxsolid#f00;}#app2Mark{width:300px;height:100px;position:absolute;left:0;top:0;z-index:2}</div>蒙版颜色ctx.fillStyle='#0cc';这个主要是用来设置填充样式效果来查看的——传送门有兴趣的可以去看看，这里用不到就不赘述了。传送门-CanvasAPI中文网色值填充RGB色值：RGB(255,0,0)HSL色值：HSL(360,100%,50%)RGBA色值：RGBA(255,0,0,.5）HSLA颜色值：HSLA(360,100%,50%,.5)HEX颜色值：#FF0000lineargradientcreateLinearGradient()radialgradientcreateRadialGradient()patterncreatePatternctx=app3Mark.getContext('2d');app3Mark.width=300;app3Mark.height=100;ctx.moveTo(0,0);ctx.lineTo(app3Mark.width,0);ctx.lineTo(app3Mark.width,app3Mark.height);ctx.lineTo(0,app3Mark.height);ctx.fillStyle='#0cc';ctx.填充();MaskimagedrawImage()使用该方法绘制图片，需要等待图片加载完成后才能使用查看效果-传送门ctx=app4Mark.getContext('2d');app4Mark.width=300;app4Mark.height=100;varimageFill=newImage();imageFill.src='https://www.lilnong.top/static/img/defaultmatch。png'app4MarkCtx=ctx;imageFill.onload=function(){app4MarkCtx.drawImage(this,0,0,300,100)}Scratchstroke自定义（重要）clearRect方案效果传送门context.clearRect(x,y,width,height);清除画布某个矩形区域的内容。使用起来相当简单，只需校正中心点即可。但它只能是一个矩形，而且看起来很锯齿。globalCompositeOperationscheme效果入口设置图形在绘制时的混合模式。portal-canvasapi，其实很多我都没用过，太难了，不知道在PS里怎么用。destination-*区别在于action的body是新的内容还是原来的内容。source-*系列是新内容，而destination-*系列的actionbody是原来的内容。source-overdefault，表现为覆盖。纯视觉叠加。source-in是指在原有内容上绘制，重叠部分显示，叠加透明。source-out对应于source-in，也就是减去原来的内容。source-atop的行为类似于在原始内容上绘图，使用原始内容的透明度。destination-over表示原内容绘制在上方，新内容绘制在下方。Destination-in也是一样的，它表现为透明覆盖，显示重叠的部分。同理，destination-out隐藏了原内容和新内容重叠的部分。destination-atop原内容只显示新内容的重叠部分，新内容显示在较浅的自然光混合效果copy下方只显示新内容xor重叠区域透明multiply。顶层中的像素与底层中的相应像素相乘。结果是画面较暗。像素被反转、相乘，然后再次反转。最终结果是更轻的图形（与相乘相反）覆盖。倍增和屏幕的组合效果。基层上的深色部分更深，浅色部分更深。保留原始内容并使新内容中最暗的像素变亮。Color-dodge对原始内容和新内容中最亮的像素进行颜色减淡。底层颜色值除以顶层颜色值的反色值color-burncolorburn。底层的颜色值除以顶层的颜色值，结果是反硬光。和overlay类似，是multiply和screen的综合效果。只是把底部和顶部的位置换成了soft-light柔光。硬光的柔光版。纯黑或纯白不会生成纯黑或纯白。差异差异。顶部颜色值减去底部颜色值的绝对值。如果全白，最后会变黑，因为值为0；什么时候是白色，比如RGB(255,0,0)和RGB(0,255,255)，减去颜色值后的绝对值为RGB(255,255,255)。排除排除。类似于差异，但对比度较低。色调色调。最终颜色保留底层的亮度和色度，同时采用顶层的色调。饱和饱和度。最终颜色保留底层的亮度和色调，同时采用顶层的色度。颜色颜色值。最终颜色保留了底层的亮度，同时采用了顶层的色调和色度。亮度亮度。最终颜色保留底层的色调和色度，同时采用顶层的亮度。轨道生成器首先查看我们删除的代码。其实取决于x和y的坐标值。然后我们绘制一个明确的方法并传递坐标。记录下每次点击的点，然后循环推送点，不是自动的吗？app6Mark.addEventListener('mousedown',function(e){app6MarkMouseDownTag=1app6MarkCtx.fillText('lilnong.top',e.offsetX-50,e.offsetY+10);})划痕面积比??getImageData返回一个ImageData对象，其中包含画布的部分或完整像素信息。这四个值分别标识一个像素信息为(r,g,b,a)。这里我们只判断透明通道，然后统计通道透明数/总循环数，即刮取面积的比例varimageData=ctx.getImageData(0,0,300,200).data;vareraseTotal=0;varstep=1*4;//步长精度for(vari=3,len=imageData.length;i