JS+Canvas draws a lucky draw wheel
|
This article shares the specific code of JS+Canvas drawing the lottery turntable for your reference. The specific content is as follows I would like to share with you a lucky draw with a turntable drawn by Canvas. When you click the switch to start the turntable, the turntable starts to rotate. When the turntable stops, the area pointed by the pointer is the prize drawn and is displayed in the middle of the turntable. The effect is as follows:
The animation code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
background: #eee;
}
</style>
<title>Canvas draws the lucky draw wheel</title>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var cobj = canvas.getContext("2d");
var btn = document.getElementById("btn");
var num = Math.PI / 180;
cobj.translate(250, 250);
var colorArr = ["#24a274", "#2a70a6", "#6d56c3", "#b23880", "#7a9a36", "#b48548", "#397839", "#89489c"];
var textArr = ["js", "html", "css", "php", "mysql", "node", "flutter", "java"];
var angle = 0;
btn.onclick = function () {
location.reload();
};
var step = 10 + 10 * Math.random();
var t = setInterval(function () {
if (step <= 0.3) {
clearInterval(t);
var num1 = Math.ceil(angle / 45);
var con = textArr[textArr.length - num1];
cobj.font = "18px sans-serif";
cobj.textAlign = "center";
cobj.fillText(con, 0, 0);
} else {
if (angle >= 360) {
angle = 0;
}
step *= 0.95;
angle += step;
cobj.clearRect(-200, -200, 500, 500);
cobj.beginPath();
cobj.lineWidth = 5;
cobj.moveTo(135, 0);
cobj.lineTo(150, 0);
cobj.stroke();
cobj.lineWidth = 2;
cobj.save();
cobj.rotate(angle * num);
for (var i = 1; i <= 8; i++) {
cobj.beginPath();
cobj.moveTo(0, 0);
cobj.fillStyle = colorArr[i - 1];
cobj.arc(0, 0, 130, (i - 1) * 45 * num, i * 45 * num);
cobj.closePath();
cobj.stroke();
cobj.fill();
}
cobj.beginPath();
cobj.fillStyle = "#fff";
cobj.arc(0, 0, 60, 0, 2 * Math.PI);
cobj.fill();
for (var i = 0; i < 8; i++) {
cobj.save();
cobj.beginPath();
cobj.rotate((i * 45 + 20) * num);
cobj.fillStyle = "#222";
cobj.font = "18px sans-serif";
cobj.fillText(textArr[i], 75, 0);
cobj.restore();
}
cobj.restore();
}
}, 60)
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=500></canvas>
<input type="button" value="Start" id="btn" />
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Detailed explanation of overlay network in Docker
>>: Detailed steps to modify MySQL stored procedures
Recommend
Vue implements book management case
This article example shares the specific code of ...
MySQL 5.7.21 decompression version installation and configuration method graphic tutorial (win10)
The installation and configuration method of MySQ...
In-depth explanation of Session and Cookie in Tomcat
Preface HTTP is a stateless communication protoco...
Several methods to execute sql files under mysql command line
Table of contents The first method: When the MySQ...
Analysis of two implementation methods for adding static routing in Linux
Command to add a route: 1.Route add route add -ne...
MySQL joint table query basic operation left-join common pitfalls
Overview For small and medium-sized projects, joi...
Implementation of one-click packaging and publishing of Vue projects using Jenkins
Table of contents Jenkins installation Install Ch...
A problem with MySQL 5.5 deployment
MySQL deployment Currently, the company deploys M...
js to implement verification code interference (dynamic)
This article example shares the specific code of ...
Vue implements multiple selections in the bottom pop-up window
This article example shares the specific code of ...
Analysis of a MySQL deadlock scenario example
Preface Recently I encountered a deadlock problem...
VMware Workstation Pro 16 License Key with Usage Tutorial
VMware Workstation is a powerful desktop virtual ...
Several navigation directions that will be popular in the future
<br />This is not only an era of information...
Ant designing vue table to achieve a complete example of scalable columns
Perfect solution to the scalable column problem o...