溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用canvas怎么繪制一個刮刮卡效果？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
代碼
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="風舞紅楓,前端技術,canvas"/>
<meta name="description" content="風舞紅楓,前端技術,canvas,vue,react,node,個人博客"/>
<meta charset="utf-8">
<title>刮刮卡</title>
<link rel="icon" href="../image/icon2.ico" >
<style type="text/css">
*{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);}
</style>
</head>
<body>
<div></div>
<canvas></canvas>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext("2d");
var Jackpots = ["一等獎","二等獎","三等獎","四等獎","獎勵獎"];
//一等獎概率2% 二等獎概率6% 三等獎概率14% 四等獎概率30% 獎勵獎概率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();
}
}
//隨機n到m的一個整數
function rand(n,m){
var c = m - n + 1;
return Math.floor(Math.random() * c + n);
}
</script>
</html>關于使用canvas怎么繪制一個刮刮卡效果問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
