HTML-Canvas-JavaScript-Animating/Drawing

Question

我有这个：

http://jsfiddle.net/geduardcatalin/6Lg6ymt3/

如何使第二行从中心开始并停在左下角，就像第一行停在我想要的地方（在中心）一样？

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var canvasWidth = canvas.width;
var canvasHeight = canvas.height;

var i = 0;
var j = 0;
var k = 0;
var l = 0;

function drawLine1() {
  i = i + 1;
  j = j + 1;
  x1 = i;
  y1 = j;

  if (i >= 149) {
    i = 149;
  }

  if (j >= 149) {
    j = 149;
  }

  ctx.beginPath();
  ctx.strokeStyle = "#000000";
  ctx.lineWidth = 1;
  ctx.moveTo(0, 0);
  ctx.lineTo(x1, y1);
  ctx.stroke();
}

function drawLine2() {
  k = k - 1;
  l = l + 1;
  x2 = k;
  y2 = l;

  if (k >= 299) {
    k = 299;
  }

  if (l >= 299) {
    l = 299;
  }

  ctx.beginPath();
  ctx.strokeStyle = "#000000";
  ctx.lineWidth = 1;
  ctx.moveTo(150, 150);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

function drawLines() {
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  drawLine1();
  drawLine2();
  //setTimeout(drawLine2, 0000);
}

setInterval(drawLines, 40);

* {
  margin: 0;
  padding: 0;
}
html {
  background-color: #555555;
}
#wrapper {
  width: 300px;
  height: 300px;
  margin: 70px auto;
  border: 1px solid red;
}

<div id="wrapper">
  <canvas id="myCanvas" height="300px" width="300px"></canvas>
  <p id="demo"></p>
</div>

Answer 1

Line2中的变量k和l都要从150开始，把draw Line2()改成这样：

这是更新后的 JSFiddle。

function drawLine2(){
    k = k - 1;
    l = l + 1;
    x2 = k;
    y2 = l;

    if ( k <= 0 ){
        k = 0;
    }
    if ( l >= 299 ){
        l = 299;
    }

    ctx.beginPath();
    ctx.strokeStyle = "#000000";
    ctx.lineWidth = 1;
    ctx.moveTo(150, 150);
    ctx.lineTo(x2, y2);
    ctx.stroke();
}

Answer 2

这是因为您的 l 变量在 299 处停止，但 k 会一直持续下去。 k 将从 0 变为 -299（而不是 0 变为 299），因此要修复它，您需要将其条件更改为：

if ( k <= -299 ){
    k = -299;
}

并获得您在评论中提到的正确 ctx.lineTo(x2 + 149, y2 + 149);。

HTML-Canvas-JavaScript-Animating/Drawing

HTML-Canvas - JavaScript-Animating/Drawing

html

javascript

canvas

html5-canvas