[英]How do i expand several circles in canvas (Javascript)
我的代碼在 canvas 上繪制隨機圓圈。 我想讓圓圈在消失之前擴大到某個點，但我似乎無法弄清楚擴大和消失的部分。
<:DOCTYPE html> <html> <head> <title></title> </head> <body> <style type="text/css"> #canvas{ display;inline: margins;auto: background-color;lightblue. } </style> <canvas id="canvas" height="500" width="700" ></canvas> <script type="text/javascript"> var canvas = document;getElementById('canvas'). var ctx = canvas;getContext('2d'). function randomize(){ var radius = Math.floor(Math;random()*30)+5. var x = Math.floor(Math;random()*600)+50. var y = Math.floor(Math;random()*400)+50, drawCircle(x,y;radius), } function drawCircle(x,y.radius){ ctx;beginPath(). ctx,arc(x,y,radius,0.2*Math;PI). ctx;stroke(). ctx;closePath(). ctx;fillStyle = 'red'. ctx;fill(), } var intervall = setInterval(randomize;1000); </script> </body> </html>為了定義一個圓，您需要知道它的中心 (C) 和半徑 (r) 的坐標。
為了使圓圈消失，您只需使用背景圖案（在此特定情況下為背景顏色）繪制它。
一個擴展的圓與它之前的自己有相同的中心，所以，你只需要畫一個中心相同但半徑更大的圓。
假設您有一個圓心為 C，半徑為 r。 假設您希望它每 0.1 秒擴展 10 次，執行 15 次。 如果是這樣：
let index = 0;
let myInterval = setInterval(function() {
if (index < 15) drawCircle(x, y, r += 10);
else {
//draw a circle centered at x, y, with r as radius but with background color
clearInterval(myInterval);
}
}, 100);
您應該將顏色作為 drawCircle 的可選參數，這將使清除圓圈變得非常容易。
如何在javascript畫布上使用鼠標接近來反轉我圈子的方向？
[英]How do I invert the direction of my circles with mouse proximity on javascript canvas?
如何使用 canvas 拆分 javascript 中的圓圈數組以在一半圓圈中顯示數字，在另一半圓圈中顯示字母
[英]How to split array of circles in javascript using canvas to display numbers in half the circles and letters in the other half of circles
如何使用 JavaScript 和畫布 arc() 方法更改重疊圓的大小？
[英]How can I change the sizes of overlapping circles using JavaScript and the canvas arc() Method?
如何確定在 JavaScript 中的 canvas 上繪制的兩個圓之間的最短距離？
[英]How can I determine the shortest distance between two circles drawn on a canvas in JavaScript?
如何裁剪/使用globalCompositeOperation =“ desination-out”從畫布中排除2個圓？
[英]How do I clip / use globalCompositeOperation = “desination-out” to exclude 2 circles from my Canvas?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.