我想在 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;
}
我希望屏幕似乎会一点一点地绘制增量线，直到达到我想要的长度。但是，似乎没有显示整个增量过程，它只显示了完成的绘图。
谁能告诉我为什么？