我在畫布中繪制影片圓圈，到目前為止，我設法使它在畫布中從左到右移動。 我需要做的是，當圓圈到達它的最右邊的位置時，使它再次開始它的路徑（從左到右），但位置在下面。我試圖改變它的Y位置，至少改變圓的直徑，到目前為止還沒有成功。 對我如何實作這一目標有什么見解嗎？是讓它成為影片的一部分，還是讓左右運動成為一個簡單的回圈，在最后改變Y的位置？ 到目前為止，我的代碼如下：
var canvas3 = document. getElementById("canvas3"/span>)。
canvas3.width = 300;
canvas3.height = 500;
var c3 = canvas3.getContext("2d")。
var radius = 13;
var x = radius;
var y = radius;
var dx = 1;
var dy = 0;
function animate3（） {
requestAnimationFrame（animate3）。
c3.clearRect（0，0，300，500）。
if (x radius > 300 || x - radius < 0) {
dx = 0;
y y;
}
if (y radius > 500 || y - radius < 0) {
dy = 0;
}
x = dx;
y = dy。
c3.beginPath（）。
c3.arc(x, y, 12, 0, Math. PI * 2, false）。)
c3.stroke（）。
c3.fillText(5, x - 3, y 3) 。
}
animate3（）。
uj5u.com熱心網友回復：
我將簡單地重置x的位置并增加y的位置，就像這樣：
var canvas3 = document. getElementById("canvas3"/span>)。
canvas3.width = 300;
canvas3.height = 500;
var c3 = canvas3.getContext("2d")。
var radius = 13;
var x = radius;
var y = radius;
var dx = 5;
var dy = 0;
function animate3（）{
requestAnimationFrame（animate3）。
c3.clearRect（0，0，300，500）。
if (x radius > 300 || x - radius < 0) {
x = radius;
y = radius;
}
if (y radius > 500 || y - radius < 0) {
y = radius;
}
x = dx;
y = dy。
c3.beginPath（）。
c3.arc(x, y, 12, 0, Math. PI * 2, false）。)
c3.stroke（）。
c3.fillText(5, x - 3, y 3) 。
}
animate3(); < canvas id="canvas3"/>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/319399.html
標籤：
上一篇：圍繞Svg路徑順時針閃爍顏色