【发布时间】：2013-07-06 19:18:48
【问题描述】：
我想用 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;
}
我希望屏幕看起来会一点一点地绘制增量线，直到达到我想要的长度。但是，似乎没有显示整个增量过程，它只显示了完成的绘图。
谁能告诉我为什么？
【问题讨论】：
标签： javascript html canvas