javascript+canvas实现刮刮卡抽奖效果

时间：2021-05-26

运用canvas做的简单刮刮卡效果，每次刷新可重新测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://positeOperation="destination-out"; context.arc(movex,movey,penwidth,0,Math.PI*2,true); //Math.PI*2是JS计算方法，是圆 context.closePath(); context.fill(); } } function onMouseDown(evt) { flag = 1; //标志按下} function onMouseUp(evt) { flag = 0; //读取像素数据 imgData=context.getImageData(0,0,200,80);//获取当前画布数据 //imgData.data.length 获取图片数据总长度，没4个为一组存放rgba for(var i=0; i<imgData.data.length;i+=4){ var rval=imgData.data[i]; var gval=imgData.data[i+1]; var bval=imgData.data[i+2]; var aval=imgData.data[i+3]; var rgbaval=rval+"-"+gval+"-"+bval+"-"+aval; rgbabox.push(rgbaval); } //end for(var j=0;j<rgbabox.length;j++){ //alert(rgbabox[j].split("-")[0]) rgbabox[j]='#'+rgbToHex(rgbabox[j].split("-")[0],rgbabox[j].split("-")[1],rgbabox[j].split("-")[2]); } nump=countSubstr(rgbabox.join(","),backcolorb,true); opacitya=(numl-nump)/numl; if(opacitya>opacityb){ alert("恭喜你获得"+percjcon[numrandom]) }else{} } function rgbToHex(r, g, b) { return ((r << 16) | (g << 8) | b).toString(16); }//rgb转为16进制 #xxx形式function countSubstr(str,substr,isIgnore){//计算字符串出现子字符串的个数 var count; var reg=""; if(isIgnore==true){ reg="/"+substr+"/gi"; }else{ reg="/"+substr+"/g"; } reg=eval(reg); if(str.match(reg)==null){ count=0; }else{ count=str.match(reg).length; } return count;}//end</script></html>

以上所述就是本文的全部内容了，希望大家能够喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章