Jquery HTML画布绘图

我试图画一个红色的不正确的标记，但我不知道从哪里开始谁能帮我创建一个

我有下面的jsfiddle来画一个正确的复选标记

功能正确（键）{
var启动=100；
var-mid=145；
var端=250；
var宽度=20；
var leftX=开始；
var leftY=开始；
var rightX=中间-（宽度/2.7）；
var rightY=中间+（宽度/2.7）；
var animationSpeed=5；
var ctx=document.getElementById（key.getContext（'2d'）；
ctx.lineWidth=宽度；
ctx.strokeStyle='rgba（0,150,0,1）'；
var i；
对于（i=开始；i

这是我到目前为止所做的尝试

功能图不正确（键）{
var宽度=20；
var animationSpeed=5；
var ctx=document.getElementById（key.getContext（'2d'）；
ctx.lineWidth=宽度；
ctx.strokeStyle=‘红色’；
var startx=50；
var-starty=50；
var endx=150；
var endy=150；
var curx=startx；
var cury=恒星；
//从左向右画
ctx.beginPath（）；
对于（变量i=50；i<150；i++）{
var drawLeft=window.setTimeout（函数（）{
ctx.moveTo（startx，starty）；
lineTo（curx++，cury++）；
ctx.stroke（）；
}，1+（i*动画速度）/3）；
}
ctx.closePath（）；
startx=150；
starty=50；
endx=50；
endy=150
curx=startx；
cury=星形；
//从右向左画
ctx.beginPath（）；
对于（变量i=50；i<150；i++）{
var drawRight=window.setTimeout（函数（）{
ctx.moveTo（startx，starty）；
lineTo（curx--，cury++）；
ctx.stroke（）；
}，1+（i*动画速度）/3）；
}
ctx.stroke（）；
}
图纸不正确（“画布”）；

---

每一条腿单独画出来就可以工作，但是如果我把两个动画结合起来，它就失败了，我设法让它工作起来

    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');

功能图不正确（键）{
var宽度=20；
var animationSpeed=5；
var ctx=document.getElementById（key.getContext（'2d'）；
ctx.lineWidth=宽度；
ctx.strokeStyle=‘红色’；
var lx=50；
var-ly=50；
//从左向右画
ctx.beginPath（）；
对于（变量i=50；i<150；i++）{
var drawLeft=window.setTimeout（函数（）{
ctx.moveTo（50,50）；
ctx.lineTo（lx++，ly++）；
ctx.stroke（）；
如果（ly==150）{
var rx=150；
var-ry=50；
ctx.beginPath（）；
对于（变量i=50；i<150；i++）{
var drawRight=window.setTimeout（函数（）{
ctx.moveTo（150,50）；
lineTo（rx--，ry++）；
ctx.stroke（）；
}，1+（i*动画速度）/3）；
}
ctx.stroke（）；
}
}，1+（i*动画速度）/3）；
}
}
图纸不正确（“画布”）；

您已经成功地用两条增量对角线绘制了一个复选标记。只需重新定位两条对角线，就可以画出一个X——也许可以更改

strokeStyle='red'

。我试过了，但看看如果我分别画每条腿，它就可以工作了，但只要我把这两条线结合起来，它就会画出一条直线哈哈，好吧，我想我明白了

        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');

    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');