JS+Canvas繪制抽獎(jiǎng)轉(zhuǎn)盤(pán)
本文實(shí)例為大家分享了JS+Canvas繪制抽獎(jiǎng)轉(zhuǎn)盤(pán)的具體代碼,供大家參考,具體內(nèi)容如下
給大家分享一個(gè)Canvas繪制的轉(zhuǎn)盤(pán)抽獎(jiǎng),點(diǎn)擊開(kāi)關(guān)開(kāi)始轉(zhuǎn)動(dòng)時(shí),轉(zhuǎn)盤(pán)開(kāi)始轉(zhuǎn)動(dòng),轉(zhuǎn)盤(pán)停止時(shí)指針指向的區(qū)域即為抽中的獎(jiǎng)品,并顯示在轉(zhuǎn)盤(pán)中間,效果圖如下:
動(dòng)畫(huà)實(shí)的代碼如下:
<!DOCTYPE html> <html> <head> <style> canvas { background: #eee; } </style> <title>Canvas繪制抽獎(jiǎng)轉(zhuǎn)盤(pán)</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="開(kāi)始" id="btn" /> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript動(dòng)態(tài)創(chuàng)建二維數(shù)組的方法示例
這篇文章主要介紹了JavaScript動(dòng)態(tài)創(chuàng)建二維數(shù)組的方法,結(jié)合實(shí)例形式分析了javascript動(dòng)態(tài)創(chuàng)建二維數(shù)組的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-02-02JavaScript常用的3種彈出框(提示框?alert/確認(rèn)框?confirm/輸入框?prompt)
三種彈框在系統(tǒng)中都是同步執(zhí)行的,也就是說(shuō),三種彈框中的任一彈框彈出,代碼都不在執(zhí)行,直到點(diǎn)擊確認(rèn)或取消,關(guān)閉彈窗后,代碼繼續(xù)執(zhí)行,本文通過(guò)實(shí)例代碼給大家分享JS常用的3種彈出框,感興趣的朋友一起看看吧2022-07-07JavaScript中instanceof運(yùn)算符的用法總結(jié)
這篇文章主要是對(duì)JavaScript中instanceof運(yùn)算符的用法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11怎么在下面的HTML里調(diào)用數(shù)組cs[]的值
怎么在下面的HTML里調(diào)用數(shù)組cs[]的值...2007-01-01支持多瀏覽器(IE、Firefox、Opera)剪切板復(fù)制函數(shù)_腳本之家修正版
有朋友要剪切板復(fù)制函數(shù),可網(wǎng)上的好多代碼都是不能運(yùn)行的,各種其它符號(hào),導(dǎo)致了腳本的不可運(yùn)行,腳本之家站長(zhǎng)特整理了下,修正了錯(cuò)誤。2008-12-12JavaScript實(shí)現(xiàn)輸入框與清空按鈕聯(lián)動(dòng)效果
本文給大家分享基于js實(shí)現(xiàn)輸入框與清空框按鈕聯(lián)動(dòng)效果,非常實(shí)用,代碼簡(jiǎn)單易懂,感興趣的朋友一起看看吧2016-09-09document.styleSheets[0].rules 與 cssRules區(qū)別
document.styleSheets[0].rules 與 cssRules區(qū)別...2007-08-08