JS+Canvas绘制抽奖转盘
更新时间：2021年10月13日 09:13:27 作者：aiguangyuan
这篇文章主要为大家详细介绍了JS+Canvas绘制抽奖转盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS+Canvas绘制抽奖转盘的具体代码，供大家参考，具体内容如下
给大家分享一个Canvas绘制的转盘抽奖，点击开关开始转动时，转盘开始转动，转盘停止时指针指向的区域即为抽中的奖品，并显示在转盘中间，效果图如下：
动画实的代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
background: #eee;
}
</style>
<title>Canvas绘制抽奖转盘</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="开始" id="btn" />
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在 JavaScript 中，可以使用 performance.now() API 来评测代码的运行速度。该 API 返回当前页面的高精度时间戳，您可以在代码执行前后调用它来计算代码执行所需的时间，这篇文章主要介绍了JavaScript 评测代码运行速度,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了Javascript实现贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。接下来通过本文给大家分享JavaScript中var that=this所代表的意思，需要的朋友参考下吧2017-02-02
这篇文章主要给大家介绍了关于微信小程序学习之wxs使用教程的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了使用js绘制几何图形的方法的系列文章，本文主要讲诉正弦曲线的绘制方法,需要的朋友可以参考下2015-01-01
js 将input框中的输入自动转化成半角大写（税号输入框）
本文主要介绍了税号输入框：将input框中的输入自动转化成半角大写的方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
浅谈webpack打包生成的bundle.js文件过大的问题
下面小编就为大家分享一篇浅谈webpack打包生成的bundle.js文件过大的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了ES6新特性之promise对象,结合实例形式详细分析了promise对象的功能、状态、使用方法与相关操作技巧,需要的朋友可以参考下2017-04-04
最近在学习js 写了个简单的效果,菜鸟可以学习学习,基本原理：使用随即数设置top 和left的值，2009-07-07
本文讨论了前端监控和数据统计的设计思路,包括错误监控、用户行为日志、PV/UV统计等方面,介绍了数据采集、日志上报、日志查询的流程,以及监控错误的类型和用户埋点统计的手段,同时提到了PV和UV的统计方法,需要的朋友可以参考下2024-10-10
最新评论