本文实例为大家分享了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 >
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_42231248/article/details/114383090