[英]Html5 canvas, delay drawing 2 lines
我想画一条2行。 首先应该在打开页面后开始3秒,这没有问题,第二行(以及后面的另一行)应该在第一行完成后开始绘制(或者可能在第一次完成后将是3秒,或者单击按钮) 。
有这样的代码,但我不知道怎么做,我只能在同一时间做2行。
var amount = 0;
var amountt=1;
var startX = 0;
var startY = 0;
var endX = 500;
var endY = 300;
var startXx = 0;
var startYy = 0;
var endXx = 500;
var endYy = -300;
setTimeout(function() {
var interval = setInterval(function() {
amount += 0.01; // change to alter duration
if (amount > 1) {
amount = 1;
clearInterval(interval);
}
ctx.strokeStyle = "black";
ctx.lineWidth=1;
ctx.strokeStyle="#707070";
ctx.moveTo(startX, startY);
// lerp : a + (b - a) * f
ctx.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
ctx.stroke();
ctx.strokeStyle = "black";
ctx.lineWidth=1;
ctx.strokeStyle="#707070";
ctx.moveTo(startX, startY);
// lerp : a + (b - a) * f
ctx.lineTo(startXx + (endXx - startXx) * amount, startYy + (endYy - startYy) * amount);
ctx.stroke();
}, 0);
}, 3000);
我不确定这是否正是你所追求的,但我接受了你写的一些内容并对其进行了解释。
这是一个jsFiddle与结果http://jsfiddle.net/GZSJp/
基本上你有一个间隔,每隔3秒调用一行线。 然后你有一个内部间隔,动画线条绘制。
var idx = -1;
var startx = [0, 500, 100];
var starty = [0, 0, 300];
var endx = [500, 0, 400];
var endy = [300, 500, 300];
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");
var drawLinesInterval = setInterval(function() {
if(idx > startx.length)
clearInterval(drawLinesInterval);
var linepercentage = 0;
idx++; //move onto the next line
var animateInterval = setInterval(function() {
linepercentage += 0.01;
if(linepercentage > 1)
{
clearInterval(animateInterval);
}
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.strokeStyle = "#707070";
ctx.moveTo(startx[idx], starty[idx]);
var tempxend = 0;
var tempyend = 0;
if(startx[idx] > endx[idx])
tempxend = startx[idx] - ((startx[idx]-endx[idx])*linepercentage);
else
tempxend = startx[idx] + ((endx[idx]-startx[idx])*linepercentage);
if(starty[idx] > endy[idx])
tempyend = starty[idx] - ((starty[idx]-endy[idx])*linepercentage);
else
tempyend = starty[idx] + ((endy[idx]-starty[idx])*linepercentage);
ctx.lineTo(tempxend, tempyend);
ctx.stroke();
}, 10);
}, 3000);
如果这不能回答你的问题,请告诉我。 谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.