HTML画布绘图

我想绘制一个红色的不正确的标记，但我不知道从哪里开始任何人都可以帮助我创建一个。HTML画布绘图

我有以下的jsfiddle得出正确对号

 function drawCorrect(key) { 
     var start = 100; 
     var mid = 145; 
     var end = 250; 
     var width = 20; 
     var leftX = start; 
     var leftY = start; 
     var rightX = mid - (width/2.7); 
     var rightY = mid + (width/2.7); 
     var animationSpeed = 5; 

     var ctx = document.getElementById(key).getContext('2d'); 
     ctx.lineWidth = width; 
     ctx.strokeStyle = 'rgba(0, 150, 0, 1)'; 
     var i; 
     for (i = start; i < mid; i++) { 
     var drawLeft = window.setTimeout(function() { 
      ctx.beginPath(); 
      ctx.moveTo(start, start); 
      ctx.lineTo(leftX, leftY); 
      ctx.stroke(); 
      leftX++; 
      leftY++; 
     }, 1 + (i * animationSpeed)/3); 
     } 

     for (i = mid; i < end; i++) { 
     var drawRight = window.setTimeout(function() { 
      ctx.beginPath(); 
      ctx.moveTo(leftX, leftY); 
      ctx.lineTo(rightX, rightY); 
      ctx.stroke(); 
      rightX++; 
      rightY--; 
     }, 1 + (i * animationSpeed)/3); 
     } 
    } 

    drawCorrect('canvas');

这里是我到目前为止已经试过https://jsfiddle.net/zj6L8y17/

 function drawIncorrect(key) { 

     var width = 20; 
     var animationSpeed = 5; 

     var ctx = document.getElementById(key).getContext('2d'); 
     ctx.lineWidth = width; 
     ctx.strokeStyle = 'red'; 

     var startx = 50; 
     var starty = 50; 
     var endx = 150; 
     var endy = 150; 
     var curx = startx; 
     var cury = starty; 

     //Draw left to right 
     ctx.beginPath(); 
     for (var i = 50; i < 150; i++) { 
     var drawLeft = window.setTimeout(function() { 
      ctx.moveTo(startx, starty); 
      ctx.lineTo(curx++, cury++); 
      ctx.stroke(); 
     }, 1 + (i * animationSpeed)/3); 
     } 
     ctx.closePath(); 

     startx = 150; 
     starty = 50; 
     endx = 50; 
     endy = 150 
     curx = startx; 
     cury = starty; 
     //Draw right to left 
     ctx.beginPath(); 
     for (var i = 50; i < 150; i++) { 
     var drawRight = window.setTimeout(function() { 
      ctx.moveTo(startx, starty); 
      ctx.lineTo(curx--, cury++); 
      ctx.stroke(); 
     }, 1 + (i * animationSpeed)/3); 
     } 
     ctx.stroke(); 
    } 

    drawIncorrect('canvas');

seperately绘制每条腿它的工作原理，但如果我结合这两个动画，它只是失败

来源

2017-02-09 Donald Jansen

您已经成功绘制了一个带有2条增量对角线的复选标记。简单地通过重新定位2条对角线来制作一个X--也许可以改变'strokeStyle ='red''。 – markE

我试过了，但看看https://jsfiddle.net/zj6L8y17/，如果我单独绘制每条腿的效果，但只要我将它们合并，然后绘制一条直线 –

哈哈好吧，我认为我知道了 –

我设法让它工作

function drawIncorrect(key) { 

     var width = 20; 
     var animationSpeed = 5; 

     var ctx = document.getElementById(key).getContext('2d'); 
     ctx.lineWidth = width; 
     ctx.strokeStyle = 'red'; 


     var lx = 50; 
     var ly = 50; 

     //Draw left to right 
     ctx.beginPath(); 
     for (var i = 50; i < 150; i++) { 
     var drawLeft = window.setTimeout(function() { 
      ctx.moveTo(50, 50); 
      ctx.lineTo(lx++, ly++); 
      ctx.stroke(); 
      if (ly == 150) { 
      var rx = 150; 
      var ry = 50; 
      ctx.beginPath(); 
      for (var i = 50; i < 150; i++) { 
       var drawRight = window.setTimeout(function() { 
       ctx.moveTo(150, 50); 
       ctx.lineTo(rx--, ry++); 
       ctx.stroke(); 
       }, 1 + (i * animationSpeed)/3); 
      } 
      ctx.stroke(); 
      } 
     }, 1 + (i * animationSpeed)/3); 
     } 


    } 

    drawIncorrect('canvas');

来源

2017-02-10 08:28:26

HTML画布绘图

回答

相关问题