介绍 & lt; script>
var arr=(
{名称:“iphone7磨砂黑,,颜色:“rgba (255255 0 1)“;},
{名称:“iphone7磨砂黑,,颜色:“rgba (0255、0。9)“;},
{名称:“iphone7磨砂黑,,颜色:“rgba (10255255 1)“},
{名称:“iphone7磨砂黑,,颜色:“rgba (10255100 1)“}
]
var r=math . random ();
var rIndex=Math.floor (r * arr.length);
var rPrice=arr [rIndex];
var简历=document.getElementsByTagName(& # 39;帆布# 39;)[0];
var isDown=false;
cv.height=400;
cv.width=600;
var ctx=cv.getContext (“2 d");
函数toAngle(弧度){
返回弧度/Math.PI * 180;
}
函数toRadian(角){
返回角/180 * Math.PI;
}
ctx.textAlign=癱enter";
ctx.textBaseline=癿iddle";
30 px consolas" ctx.font=?;;
ctx.fillStyle=rPrice.color;
ctx.fillText (rPrice.name cv.width/2, cv.height/2);
var dataURL=cv.toDataURL(“图像/jpg", 1);
cv.style.background=皍rl (“+ dataURL +“)“;//覆盖层
ctx.beginPath ();
ctx.fillStyle=? eee";
ctx.fillRect (0, 0, cv.width cv.height);
cv.addEventListener (“mousedown"、功能(){
isDown=true;
})
cv.addEventListener (“mouseup"、功能(){
isDown=false;
ctx.globalCompositeOperation=皊ource-out"
})
cv.addEventListener (“mousemove",函数(e) {
如果(isDown) {
ctx.globalCompositeOperation=癲estination-out";
ctx.beginPath ();
var posObj=cv.getBoundingClientRect ();
var左=posObj.left;
var=posObj.top最高;
var x=e.clientX-left;
var y=e.clientY-top;
ctx.arc (x, y, 50 0 Math.PI * 2);
ctx.fill ();
}
})
& lt;/script>
这篇文章主要介绍h5canvas实现刮刮乐效果的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
画布上实现刮刮乐主要是要注意两个地方:第一个是将绘制的图形设置成背景图片(用到toDataURL属性),这样在擦覆盖层的时候才不会丢失绘制的图案,
第二个是设置在绘制插图的时候,设置透明透明(用到globalCompositeOperation属性)
代码如下:
以上是h5canvas实现刮刮乐效果的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
