Холст. Рисуем вторую строчку, чтобы стереть первую.

Question

Итак, у меня есть одна линия, которая отскакивает от стен моей границы, меняя цвета. Но теперь я должен создать вторую, белую линию, которая будет проходить через 3 или 4 секунды после первой строки, стирающей ее. Таким образом, это будет всего лишь 4-секундная цветовая линия, отскакивающая от стен. И я понятия не имею, как это сделать. Я уже пытался использовать SetTimeout, создавая множество функций и т.д.

\t  var ctx=document.getElementById("canvas1").getContext("2d"); 
 

 
ctx.strokeStyle="red"; 
 
ctx.lineWidth=1; 
 

 

 
var x=0 
 
var y=0 
 
var dx=1 
 
var dy=1 
 

 

 

 
function rysuj(){ 
 
    ctx.strokeStyle="#"+((1<<24)*Math.random()|0).toString(16); 
 
    ctx.beginPath() 
 
    ctx.moveTo(x,y); 
 
    ctx.lineTo(x+dx,y+dy); 
 
    ctx.stroke(); 
 
    if(x>200||x<0) dx=-dx; 
 
    if(y>150||y<0) dy=-dy; 
 
    x=x+dx; 
 
    y=y+dy; \t 
 
} 
 
setInterval ('rysuj()', 5);

<canvas id="canvas1" style="width:1000px; height:500px; border-style:solid;"> 
 
</canvas>

Answer 1

Похоже, ключ должен иметь две функции отрисовки (обратите внимание, что это не является идеальным, но он работает) и всегда имеют «белую» функцию, явно устанавливают strokeStyle. Это связано с тем, что контекст для обеих функций розыгрыша извлекается из одного холста, и если вы явно не установите его в «белой» ничьей, это будет то, что было от предыдущей «красной» ничьей.

Смотрите ниже:

var getCanvasContext = function(strokeColor) { 
     var ctx = document.getElementById("canvas1").getContext("2d"); 
     ctx.strokeStyle=strokeColor; 
     ctx.lineWidth=1; 
     return {ctx: ctx, x: 0, y:0, dx:1, dy:1, change: strokeColor !== "white"}; 
    } 

    var drawRed = function(canvasContext) { 
     var ctx = canvasContext.ctx, 
      x = canvasContext.x, 
      y = canvasContext.y, 
      dx = canvasContext.dx, 
      dy = canvasContext.dy; 

     if (canvasContext.change) { 
     ctx.strokeStyle="#"+((1<<24)*Math.random()|0).toString(16); 
     } 
     ctx.beginPath(); 
     ctx.moveTo(x,y); 
     ctx.lineTo(x+dx, y+dy); 
     ctx.stroke(); 
     if(x>200||x<0) dx=-dx; 
     if(y>150||y<0) dy=-dy; 
     x=x+dx; 
     y=y+dy; 

     canvasContext.ctx = ctx; 
     canvasContext.x = x; 
     canvasContext.y = y; 
     canvasContext.dx = dx; 
     canvasContext.dy = dy; 
    }; 

    var drawWhite = function(canvasContext) { 
     var ctx = canvasContext.ctx, 
      x = canvasContext.x, 
      y = canvasContext.y, 
      dx = canvasContext.dx, 
      dy = canvasContext.dy; 

     ctx.strokeStyle="#ffffff"; 
     ctx.beginPath(); 
     ctx.moveTo(x,y); 
     ctx.lineTo(x+dx, y+dy); 
     ctx.stroke(); 
     if(x>200||x<0) dx=-dx; 
     if(y>150||y<0) dy=-dy; 
     x=x+dx; 
     y=y+dy; 

     canvasContext.ctx = ctx; 
     canvasContext.x = x; 
     canvasContext.y = y; 
     canvasContext.dx = dx; 
     canvasContext.dy = dy; 
    }; 

    var redContext = getCanvasContext("red"); 
    var whiteContext = getCanvasContext("white"); 

    setInterval(function() { 
     drawRed(redContext); 
    }, 5); 

    setTimeout(function() { 
     setInterval(function() { 
     drawWhite(whiteContext) 
     }, 5); 
    }, 4000); 

Надеемся, что это помогает (см скрипку: JSFiddle Link)