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
How to remove carriage return characters from text in Linux
When the carriage return character ( Ctrl+M ) mak...
Analysis of the problems and solutions encountered in importing large amounts of data into MySQL
In the project, we often encounter the problem of...
MySQL SQL statement method to hide the middle four digits of the mobile phone number
First query table structure (sys_users): SELECT *...
Linux uses iptables to limit multiple IPs from accessing your server
Preface In the Linux kernel, netfilter is a subsy...
A brief discussion on several situations where MySQL returns Boolean types
mysql returns Boolean type In the first case, ret...
Detailed explanation of the middleman mode of Angular components
Table of contents 1. Middleman Model 2. Examples ...
Detailed explanation of WordPress multi-site configuration under Nginx environment
The multi-site feature of WordPress allows you to...
Solution to ERROR 1366 when entering Chinese in MySQL
The following error occurs when entering Chinese ...
Docker installation of RocketMQ and solutions to problems encountered during installation
Table of contents Pull the rocketmq image Create ...
When the interviewer asked the difference between char and varchar in mysql
Table of contents Difference between char and var...
Why should the number of rows in a single MySQL table not exceed 5 million?
Today, let’s discuss an interesting topic: How mu...
Common operation commands of MySQL in Linux system
Serve: # chkconfig --list List all system service...
A time-consuming troubleshooting process record of a docker error
Table of contents origin Environmental Informatio...
Pure HTML and CSS to achieve JD carousel effect
The JD carousel was implemented using pure HTML a...
MySQL and MySQL Workbench Installation Tutorial under Ubuntu
Ubuntu install jdk: [link] Install Eclipse on Ubu...