如何每n秒更改畫布上圓圈的顏色？
[英]How to change the color of the circle on canvas every n seconds?
問題描述
每n秒，陰影的大小如何變化？ 我想您必須不斷創建一個新圈子並消除上一個圈子嗎？ 怎么做？ 而且，還有沒有更好的方法？
function main() { var canvas = document.getElementsByTagName("CANVAS")[0], ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = document.documentElement.scrollHeight; var cW = canvas.width, cH = canvas.height; ctx.fillStyle = "#000"; ctx.fillRect(0, 0, cW, cH); ctx.fill(); ctx.beginPath(); ctx.fillStyle = "#FFF"; ctx.shadowBlur = 5; ctx.shadowColor = "#FFF"; ctx.arc(cW/2, cH/2, 50, 0, 2 * Math.PI, false); ctx.fill(); ctx.closePath(); } window.addEventListener("load", main);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <canvas></canvas> </body> </html>
2 個解決方案
解決方案1
2 2018-04-24 03:43:36
創建一個setInterval和顏色數組。 使用Math.random隨機選擇任何顏色。 修改main函數以接受顏色作為兩個參數。
function main(bckColor, circleColor) { var canvas = document.getElementsByTagName("CANVAS")[0], ctx = canvas.getContext("2d"); if (canvas.height) { canvas.height = 0; } canvas.width = window.innerWidth; canvas.height = document.documentElement.scrollHeight; var cW = canvas.width, cH = canvas.height; ctx.fillStyle = bckColor || "#000"; //ctx.fillStyle = "red" ; ctx.fillRect(0, 0, cW, cH); ctx.fill(); ctx.beginPath(); ctx.fillStyle = circleColor || "#FFF"; ctx.shadowBlur = 5; ctx.shadowColor = "#FFF"; ctx.arc(cW / 2, cH / 2, 50, 0, 2 * Math.PI, false); ctx.fill(); ctx.closePath(); } var colorArray = ['red', 'green', 'yellow', 'blue', 'pink', 'brown', 'orange'] var changeColor = setInterval(function() { let bckColor = colorArray[Math.floor(Math.random() * 7 + 1)]; let circleColor = colorArray[Math.floor(Math.random() * 7 + 1)]; main(bckColor, circleColor) }, 2000) window.addEventListener("load", main);
<canvas></canvas>
解決方案2
0 2018-04-25 00:57:21
與其建議每隔x秒對畫布本身進行動畫重繪，不建議使用overlay，創建一個div圓圈，將其放置在畫布的圓圈上並使用css對其陰影進行動畫處理，您將擁有所有想要的控件，例如陰影的顏色和距離，動畫速度等
這是一個小提琴 （覆蓋物的位置更好）
function main() { var canvas = document.getElementsByTagName("CANVAS")[0], ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = document.documentElement.scrollHeight; var cW = canvas.width, cH = canvas.height; ctx.fillStyle = "#000"; ctx.fillRect(0, 0, cW, cH); ctx.fill(); ctx.beginPath(); ctx.fillStyle = "#FFF"; ctx.shadowBlur = 5; ctx.shadowColor = "#FFF"; ctx.arc(cW / 2, cH / 2, 50, 0, 2 * Math.PI, false); ctx.fill(); ctx.closePath(); // position the overlay over the circle overlay.style.top = (cH / 2 - 99) + 'px' overlay.style.left = (cW / 2 - 50) + 'px' } window.addEventListener("load", main); main() const animationDuration = 2; function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } overlay.style.animationDuration = animationDuration + 's'; setInterval(function() { overlay.style.color = getRandomColor() }, animationDuration * 1000)
* { box-sizing: border-box; margin: 0; padding: 0; } canvas { width: 100vw; height: 100vh; display: block; } #overlay { border-radius: 50%; background: none; animation: shadow linear infinite; margin: auto; transform: translate(0, 50%); color: green; position: absolute; z-index: 99; width: 100px; height: 93px; } @keyframes shadow { 0% 100% { box-shadow: 0 0 0 } 50% { box-shadow: 0 0 50px 20px } }
<canvas></canvas> <div id="overlay"> </div>
如何每 n 秒更改一次背景顏色？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.