我試圖在畫布中制作一個影片：在這里，必須繪制一個有編號的圓，并從左到右移動一次，當它到達影片的終點時就會消失。
目前，我設法在回圈中制作影片，但我需要在同一時間（或有一個設定的延遲）制作多個數字圓的影片，在不同的行（改變Y的位置）中串聯，這樣它們就不會重疊了。 <我的JS代碼如下：
。// Single Animated Circle - Get Canvas element by Id
var canvas = document.getElementById("canvas") 。
//設定畫布尺寸
canvas.width = 300;
canvas.height = 900;
//獲取繪圖背景關系 //獲取繪圖背景關系
var ctx = canvas.getContext("2d")。
//橈骨
var radius = 13;
//起始位置 //起始位置
var x = radius;
var y = radius;
//x和y方向的速度
var dx = 1;
var dy = 0;
//生成亂數; //生成亂數。
var randomNumber = Math. floor(Math.random() * 60) 1;
if (randomNumber > 0 && randomNumber <=10) {
ctx.strokeStyle = "#0b0bf1"/span>;
} else if (randomNumber > 10 && randomNumber < = 20) {
ctx.strokeStyle = "#f10b0b"/span>。
} else if (randomNumber > 20 && randomNumber < = 30) {
ctx.strokeStyle = "#0bf163"/span>。
} else if (randomNumber > 30 && randomNumber < = 40) {
ctx.strokeStyle = "#f1da0b"/span>。
} else if (randomNumber > 40 && randomNumber < = 50) {
ctx.strokeStyle = "#950bf1"/span>。
} else if (randomNumber > 50 && randomNumber < = 60) {
ctx.strokeStyle = "#0bf1e5"/span>。
}
function animate3（） {
requestAnimationFrame（animate3）。
ctx.clearRect（0，0，300，900）。
if (x radius > 300 || x - radius < 0) {
x = radius;
}
x = dx;
ctx.beginPath（）。
ctx.arc(x, y, 12, 0, Math. PI * 2, false）。)
ctx.stroke（）。
ctx.fillText(randomNumber, x - 5, y 3) 。
}
//Animate the Circle; }
animate3(); < canvas id="canvas"></canvas> uj5u.com熱心網友回復：
這里有一個解決方案，它不使用類，并將影片邏輯與更新分開--如果你想更精確地控制時間，這可能很有用。
。// Some helper functions.
const clamp = (number, min, max) => Math. min(Math.max（number, min）, max）。
//選擇并洗掉Arr中的隨機成員，概率相同。
const takeRandom = arr => arr. splice(parseInt(Math. random() * arr.length), 1) [0]
//呼叫一個函式的時間間隔，傳遞自上次呼叫以來的時間量。
function update(callBack, interval) {
let now = performance.now（）。
let last;
setInterval（function() {
last = now;
now = performance.now（）。
callBack((now - last) / 1000) 。
})
}
const settings = {
width: 300,
高度: 150,
radius: 13,
gap: 5,
circles: 5,
maxSpeed: 100,
colors: ["#0b0bf1"/span>, "#f10b0b"/span>, "#0bf163"/span>, "#f1da0b", "#950bf1", "#0bf1e5"]
};
const canvas = document.getElementById("canvas") 。
canvas.width = settings.width;
canvas.height = settings.height。
const ctx = canvas.getContext("2d")。
//設定圓的屬性。
const circles = [...Array（settings.circles）。 keys()].map(span class="hljs-params">i => ({
number: i 1,
x: settings.radius,
y: settings.radius (settings.radius * 2 settings.gap) * i,
radius: settings.radius,
dx: settings.maxSpeed * Math.random(), // This is the speed in pixels per second.
dy。0,
color: takeRandom(settings.colors)
}));
function drawCircle（circle） {
ctx.strokeStyle = circle.color。
ctx.beginPath（）。
ctx.arc(circle.x, circle.y, circle. radius, 0, Math. PI * 2, false）。)
ctx.stroke（）。
ctx.fillText(circle.number, circle. x - 5, circle.y 3）。)
}
function updateCircle（circle, dt） {
//在dt秒后更新一個圓的位置。
circle.x = clamp(circle.x circle.dx * dt, circle. radius 1, settings.width - circle.radius - 1）。)
circle.y = clamp(circle.y circle.dy * dt, circle. radius 1, settings.height - circle.radius - 1）;)
}
function animate（） {
ctx.clearRect(0, 0, settings.width, settings.height) 。
circles.forEach（drawCircle）。
requestAnimationFrame（animate）。
}
update(dt => circles. forEach(circle => updateCircle（circle, dt）），50）。
animate(); < canvas id="canvas"/span> style="border: solid 1px black"></canvas> uj5u.com熱心網友回復：
在這里，我將你的示例代碼轉換為一個類......
。
我們把所有的資料作為引數傳遞，你可以在建構式中看到，我簡化了很多你的代碼，使其非常簡短，但所有你做的同樣的繪制都在繪制函式中
那么我們需要做的就是創建這個類的實體，并在你已有的 animate3 回圈中呼叫繪制函式。
你在半徑上有一個硬編碼的值：
ctx.arc(x, y, 12, 0, Math.PI * 2, false)
我想這是一個錯誤，并在我的代碼中修正它
var canvas = document. getElementById("canvas"/span>)。
canvas.width = canvas.height = 300;
var ctx = canvas.getContext("2d")。
class Circle {
constructor（data） {
this.data = data
}
draw（）{
if (this.data。 x this.data。 radius > 300 || this.data。 x - this.data.radius < 0) {
this.data。 x = this.data.radius。
}
this.data. x = this.data.dx。
ctx.beginPath（）。
ctx.arc(this.data。 x, this.data.y, this. data.radius，0，Math。 PI * 2, false）。)
ctx.stroke（）。
ctx.fillText（this.data. number, this.data。 x - 5, this. data.y 3）。)
}
}
圓圈 = []
circles. push(new Circle({radius: 13, x: 10, y: 15, dx: 1, dy: 0, number: "1"})
圓圈。 push(new Circle({radius: 10, x: 10, y: 50, dx: 2, dy: 0, number: "2"})
function animate3（） {
requestAnimationFrame（animate3）。
ctx.clearRect(0, 0, canvas.width, canvas.height) 。
circles.forEach(item => item.draw() )。
}
animate3(); < canvas id="canvas"></canvas> 代碼應該很容易理解，如果你有任何問題，請告訴我
。轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/319396.html
標籤：