gpt4 book ai didi

js+canvas实现刮刮奖功能

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 38 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章js+canvas实现刮刮奖功能由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

本文实例为大家分享了js+canvas实现刮刮奖的具体代码,供大家参考,具体内容如下 。

1.实现了PC端的刮刮奖效果 。

2.使用了canvas的文本,像素操作,合成,绘制图形,随机数 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
< html >
 
  < head >
  < meta charset = "UTF-8" >
  < title >刮刮奖</ title >
  < style type = "text/css" >
  * {
  margin: 0;
  padding: 0;
  }
 
  .box {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  position: relative;
  background: #00BFFF;
  }
 
  #prize {
  width: 300px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -150px;
  background: #fff;
  font-family: "微软雅黑";
  font-size: 40px;
  text-align: center;
  line-height: 100px;
  -webkit-user-select: none;
  }
 
  #myCanvas {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -150px;
  }
  </ style >
  </ head >
 
  < body >
  < div class = "box" >
  < div id = "prize" ></ div >
  < canvas id = "myCanvas" width = "300" height = "100" ></ canvas >
  </ div >
  </ body >
  < script type = "text/javascript" >
  //获取对象
  var textArr = ["一等奖", "二等奖", "三等奖", "谢谢惠顾", "再来一次"];
  var prize = document.getElementById("prize");
  var num = Math.random() * 100;
  if (num <= 60) {
  prize.innerText = textArr[3];
  } else if (num <= 70) {
  prize.innerText = textArr[4];
  } else if (num <= 80) {
  prize.innerText = textArr[2];
  } else if (num <= 90) {
  prize.innerText = textArr[1];
  } else if (num <= 100) {
  prize.innerText = textArr[0];
  }
  var myCanvas = document.getElementById("myCanvas");
  // 搭建环境
  var cxt = myCanvas.getContext("2d");
  cxt.globalAlpha = 1;
  cxt.fillStyle = "#ccc";
  cxt.fillRect(0, 0, 300, 100);
  var txt = "刮刮奖";
  cxt.fillStyle = "#000";
  cxt.font = "30px 微软雅黑";
  cxt.textAlign = "center";
  cxt.textBaseline = "middle";
  cxt.fillText(txt, 150, 50, 300);
  var mX, mY;
  var flag = false;
  myCanvas.onmousedown = function(e) {
  flag = true;
  mX = e.offsetX;
  mY = e.offsetY;
  drawArc(mX, mY);
  }
  document.body.onmousemove = function(e) {
  if (flag == true) {
  mX = e.offsetX;
  mY = e.offsetY;
  drawArc(mX, mY);
  }
  }
  document.body.onmouseup = function() {
  flag = false;
  sayPrize();
  }
 
  function drawArc(x, y) {
  cxt.globalCompositeOperation = "destination-out"; //相交部分不显示
  cxt.beginPath();
  cxt.fillStyle = "white";
  cxt.moveTo(x, y);
  cxt.arc(x, y, 10, 0, 2 * Math.PI);
  cxt.fill();
  }
 
  function sayPrize() {
  var myImg = cxt.getImageData(70, 30, 160, 40);
  // var myImg = cxt.getImageData(93, 37, 40, 30);
  // 设置像素点的颜色
  var num = 0;
  var max = myImg.data.length / 4;
  for (var i = 0; i < myImg.data.length ; i += 4) {
  if (myImg.data[i + 3] <= 200) {
  num++;
  }
  }
  //2/3*myImg.data.length/4
  if (num >= max * 0.6) {
  alert("恭喜您,获得:" + prize.innerText);
  }
  }
  </ script >
 
</ html >

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我.

原文链接:https://blog.csdn.net/m0_46690660/article/details/108500701 。

最后此篇关于js+canvas实现刮刮奖功能的文章就讲到这里了,如果你想了解更多关于js+canvas实现刮刮奖功能的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

38 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com