HTML5 と Javascript で継続的に成長する線を描画したいと考えています。これが私がやりたいことです：
画面の中心にあるポイントには、3 つの線 (互いに 120 度) が特定の長さ (たとえば 50 ピックス) まで成長し、この 3 つの頂点のそれぞれが新しい中心になり、別の 3 つの線があります。
（評判が悪いため画像を投稿できませんでした。うまくいけば、ここにある画像について私が何を意味するかを理解していただければ幸いです...）
画面の中心から始めて、中心として必要なすべてのポイントの配列を持つ関数を既に作成しました。この配列にループを書いて線を引くことを考えています。線が画面に表示されるように、ストロークを直接使用したくありません。事前に定義された長さに達するまで、線が少しずつ描かれるようなものを持ちたいです（ここでは悪い英語です、私の英語を許してください）。ただし、私のコードはここではうまく機能しません。すべての中心点のみが表示され、最後の中心点のみが 3 本の線を伸ばす動きをします...
これを行う正しい方法を知る必要があります...事前に感謝します!
(コード内の変数 time または startTime を無視してください...)
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas = document.getElementById('myCanvas');
canvas.width= window.innerWidth;
canvas.height= window.innerHeight;
var context = canvas.getContext('2d');
var totalLength = 50;
var centreSet = new Array();
var counter = 0;
var centre = {
x: canvas.width / 2,
y: canvas.height / 2,
};
var myLine = {
length : 0,
color : 'grey',
lineWidth : 0.5,
};
function drawLine(centre, context, mylength) {
context.beginPath();
context.moveTo(centre.x, centre.y);
context.lineTo(centre.x, centre.y - mylength);
context.moveTo(centre.x, centre.y);
context.lineTo(centre.x - 0.866 * mylength, centre.y + mylength/2);
context.moveTo(centre.x, centre.y);
context.lineTo(centre.x + 0.866 * mylength, centre.y + mylength/2);
context.lineWidth = myLine.lineWidth;
context.strokeStyle = myLine.color;
context.closePath();
context.stroke();
}
function startAnimate(centre, canvas, context, startTime, mylength) {
// update
var time = (new Date()).getTime() - startTime;
var linearSpeed = 5;
// pixels / second
var newX = linearSpeed / 10;
if(mylength < totalLength) {
mylength = mylength + newX;
// clear
//context.clearRect(0, 0, canvas.width, canvas.height);
drawLine(centre, context, mylength);
// request new frame
requestAnimFrame(function() {
startAnimate(centre, canvas, context, startTime, mylength);
});
}
}
function animate(centre, canvas, context, startTime){
//create array to have all the center points
centreSet = getCentres();
for (var i = 0; i < centreSet.length; i++){
//pass the x and y values in a object for each center we have in the array
centre.x = str2x(centreSet[i]);
centre.y = str2y(centreSet[i]);
startAnimate(centre, canvas, context, startTime, 0);
}
}
setTimeout(function() {
var startTime = (new Date()).getTime();
animate(centre, canvas, context, startTime);
}, 1000);
コードを編集したところ、次の部分を追加しました。
var length = 0;
for(var i = 0; i < 380; i++){
window.setTimeout(function() {drawFrame(length);},16.67);
length = length + 0.25;
}
必要な長さに達するまで、画面が増分線を少しずつ描画しているように見えると思います。ただし、インクリメンタルプロセス全体が表示されておらず、完成した図面のみが表示されているようです。
誰でも理由を教えてもらえますか?