2
我想在HTML5和Javascript中畫出一些不斷增長的線條。這是我想要做的：HTML5畫布不斷撫摸着線條
位於我屏幕中心的點將有3條線彼此成長（相互之間120度）到一定的長度，比如50像素，然後這3個頂點中的每一個都會變成一個新的中心和另外3條線。
（我不能發表圖片由於低信譽我有，希望你明白我的意思生根粉的形象在這裏...）
我已經編寫的功能有我需要的所有點的陣列中心，從我的屏幕中心開始。我想在這個數組上畫一個循環來畫線。我不想直接使用筆畫，以便線條出現在屏幕上。我想要有點像線條一點一點地畫出來（英語不好，請原諒我的英語），直到它達到預定義的長度。然而我的代碼在這裏工作得不是很好，它只顯示所有的中心點，只有最後一箇中心點有運動，有3條線增長...
我需要知道正確的方法來做到這一點。 .. 提前謝謝了！
（請忽略我的代碼中的可變時間或開始時間......）
<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;
}
我期待屏幕似乎會逐漸繪製增量線，直到達到我想要的長度。但是，看起來整個增量過程沒有顯示，只顯示完成的繪圖。
有誰能告訴我爲什麼？
謝謝。我已經想通了這一切！ –