canvas绘制刮刮卡效果

本文实例为大家分享了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绘制刮刮卡效果 的全部内容, 来源链接: utcz.com/p/219708.html

回到顶部