使用canvas怎么繪制一個(gè)刮刮卡效果？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

在成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作中從網(wǎng)站色彩、結(jié)構(gòu)布局、欄目設(shè)置、關(guān)鍵詞群組等細(xì)微處著手，突出企業(yè)的產(chǎn)品/服務(wù)/品牌，幫助企業(yè)鎖定精準(zhǔn)用戶，提高在線咨詢和轉(zhuǎn)化，使成都網(wǎng)站營(yíng)銷成為有效果、有回報(bào)的無(wú)錫營(yíng)銷推廣。成都創(chuàng)新互聯(lián)專業(yè)成都網(wǎng)站建設(shè)十載了，客戶滿意度97.8%，歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。

代碼

 
 
 
 
 
 
 *{margin:0;padding:0;}
 html,body{height:100%;}
 body{overflow: hidden;}
 div{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:300px;height:150px;text-align:center;line-height:150px;background:rgb(200,0,0);color:rgb(255,255,255);font-size:22px;}
 canvas{display: block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;filter:blur(0.7px);}
 


 

 


 var div = document.getElementsByTagName('div')[0];
 var canvas = document.getElementsByTagName('canvas')[0];
 var context = canvas.getContext("2d");

 var Jackpots = ["一等獎(jiǎng)","二等獎(jiǎng)","三等獎(jiǎng)","四等獎(jiǎng)","獎(jiǎng)勵(lì)獎(jiǎng)"];
 //一等獎(jiǎng)概率2% 二等獎(jiǎng)概率6% 三等獎(jiǎng)概率14% 四等獎(jiǎng)概率30% 獎(jiǎng)勵(lì)獎(jiǎng)概率48%
 var Jackpot = rand(0,49);
 if(Jackpot == 0){
 div.innerHTML = Jackpots[0];
 }else if(Jackpot>0 && Jackpot<4){
 div.innerHTML = Jackpots[1];
 }else if(Jackpot>3 && Jackpot<11){
 div.innerHTML = Jackpots[2];
 }else if(Jackpot>10 && Jackpot<26){
 div.innerHTML = Jackpots[3];
 }else{
 div.innerHTML = Jackpots[4];
 }

 context.beginPath();
 context.fillStyle = "rgb(200,200,200)"
 context.moveTo(0,0);
 context.lineTo(300,0);
 context.lineTo(300,150);
 context.lineTo(0,150);
 context.lineTo(0,0);
 context.fill();
 context.closePath();

 context.beginPath();
 context.font = '30px Arial';
 context.fillStyle = "rgb(255,255,255)"
 context.fillText("刮刮卡", 110 , 90);
 context.fill();
 context.closePath();
 
 var fillColor = ["rgb(255,0,0,0.8)","rgb(255,255,0,0.8)","rgb(255,0,255,0.8)","rgb(0,255,255,0.8)"];
 for(var i = 0;i<50;i++){
 context.beginPath();
 context.fillStyle = fillColor[rand(0,3)];
 context.arc(rand(20,280),rand(20,130),1,0,2*Math.PI);
 context.fill();
 context.closePath();
 }

 var flag = false;
 canvas.onmousedown = function(){
 flag = true;
 }

 canvas.onmouseup = function(){
 flag = false;
 }

 canvas.onmousemove = function(){
 if(flag){
 var e = event || window.event;
 var x = e.clientX - parseInt(div.offsetLeft);
 var y = e.clientY - parseInt(div.offsetTop);
 //console.log(x,y);

 context.beginPath();
 context.arc(x,y,20,0,2*Math.PI);
 context.globalCompositeOperation="destination-out";
 context.fill();
 context.closePath();
 }
 }

 //隨機(jī)n到m的一個(gè)整數(shù)
 function rand(n,m){
 var c = m - n + 1;
 return Math.floor(Math.random() * c + n);
 }

關(guān)于使用canvas怎么繪制一個(gè)刮刮卡效果問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

本文名稱：使用canvas怎么繪制一個(gè)刮刮卡效果-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://weahome.cn/article/djeodh.html