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:

js+canvas realizes turntable effect (two versions)
Analysis of js lottery turntable implementation method
Summary and implementation ideas of Vue.js big turntable lottery
JS implements a simple lottery turntable effect example
jquery.rotate.js implements the lottery code of the turntable with optional lottery number and winning content
Using Javascript to implement a simple wheel lottery
js HTML5 Canvas draws a lucky draw with a turntable
JavaScript+HTML5 Canvas draws a lucky draw with a turntable
Realizing the effect of Jiugongge turntable based on javascript
js to achieve a large turntable lottery game example

<<: Detailed explanation of overlay network in Docker

>>: Detailed steps to modify MySQL stored procedures

mySQL server connection, disconnection and cmd operation

JS+Canvas draws a lucky draw wheel

mySQL server connection, disconnection and cmd operation

docker logs - view the implementation of docker container logs

Detailed explanation of JavaScript's garbage collection mechanism

The shortest JS to determine whether it is IE6 (IE writing method)

Detailed explanation of transaction isolation levels in MySql study notes

Docker time zone issue and data migration issue

Common errors and solutions for connecting Navicat to virtual machine MySQL

Ideas and methods for realizing real-time log reporting with Nginx pure configuration

JS implements simple example code to control video playback speed

Realize the CSS loading effect after clicking the button

Recommend

HTML tutorial, HTML default style

Detailed process of integrating docker with idea to quickly deploy springboot applications

Detailed explanation of several ways to create a top-left triangle in CSS

Several methods of implementing carousel images in JS

centos7.2 offline installation mysql5.7.18.tar.gz

Analysis and treatment of scroll bars in both HTML and embedded Flash

jQuery plugin to achieve seamless carousel

Detailed explanation of the use cases of Vue listeners

How to use CSS styles and selectors

Zabbix monitors Linux hosts based on snmp

Detailed explanation of MySQL execution principle, logical layering, and changing database processing engine

Summary of 4 methods of div+css layout to achieve 2-end alignment of css

Application of CSS3 animation effects in activity pages

Beginner's guide to building a website ⑥: Detailed usage of FlashFXP

Vue3 implements CSS infinite seamless scrolling effect