JS+Canvas繪制抽獎轉盤
本文實例為大家分享了JS+Canvas繪制抽獎轉盤的具體代碼,供大家參考,具體內容如下
給大家分享一個Canvas繪制的轉盤抽獎,點擊開關開始轉動時,轉盤開始轉動,轉盤停止時指針指向的區(qū)域即為抽中的獎品,并顯示在轉盤中間,效果圖如下:
動畫實的代碼如下:
<!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動態(tài)創(chuàng)建二維數(shù)組的方法示例
這篇文章主要介紹了JavaScript動態(tài)創(chuàng)建二維數(shù)組的方法,結合實例形式分析了javascript動態(tài)創(chuàng)建二維數(shù)組的相關操作技巧與注意事項,需要的朋友可以參考下2019-02-02JavaScript常用的3種彈出框(提示框?alert/確認框?confirm/輸入框?prompt)
三種彈框在系統(tǒng)中都是同步執(zhí)行的,也就是說,三種彈框中的任一彈框彈出,代碼都不在執(zhí)行,直到點擊確認或取消,關閉彈窗后,代碼繼續(xù)執(zhí)行,本文通過實例代碼給大家分享JS常用的3種彈出框,感興趣的朋友一起看看吧2022-07-07支持多瀏覽器(IE、Firefox、Opera)剪切板復制函數(shù)_腳本之家修正版
有朋友要剪切板復制函數(shù),可網上的好多代碼都是不能運行的,各種其它符號,導致了腳本的不可運行,腳本之家站長特整理了下,修正了錯誤。2008-12-12JavaScript實現(xiàn)輸入框與清空按鈕聯(lián)動效果
本文給大家分享基于js實現(xiàn)輸入框與清空框按鈕聯(lián)動效果,非常實用,代碼簡單易懂,感興趣的朋友一起看看吧2016-09-09document.styleSheets[0].rules 與 cssRules區(qū)別
document.styleSheets[0].rules 與 cssRules區(qū)別...2007-08-08