用不同颜色构建路径的 Javascript Canvas

Question

我有两个全局变量 currentx 和 currenty 以及两个函数：

function MoveUp()   
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle="blue";
ctx.moveTo(currentx,currenty);
ctx.lineTo(currentx+20,currenty-20);
ctx.stroke();

currentx=currentx+20;
currenty=currenty-20;

}

function MoveDown()   
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle="green";
ctx.moveTo(currentx,currenty);
ctx.lineTo(currentx+20,currenty-20);
ctx.stroke();

currentx=currentx-20;
currenty=currenty-20;

}

每次我调用函数MoveUp() 我想画一条蓝线，每次我调用MoveDown() 我想写绿线。我不能使用beginPath()，因为每次起起落落，我都会一直画我的路。不使用beginPath()可以做到吗？

Answer 1

不幸的是，您必须使用 beginPath，但您也可以使用 closePath 来结束整个路径的某个“迷你路径”部分（第二个示例）。这样，每条路径就不会干涉彼此的颜色。

---

第一个示例（以某种颜色绘制整条路径）：

您可以记住到目前为止您移动的路径。

首先，您可以从 x:0, y:0 开始，然后按上下键，每行都存储到一个名为 path 的变量中。

根据您的问题，当按下向上或向下时，此 路径 始终涂成蓝色或绿色。

您的函数 MoveUp 和 MoveDown 都处理您当前的位置、决定颜色的方向、路径并最终调用 handleDirection 来显示你的路径对应于这些价值观。

如何使用这个例子：

1. 点击“运行代码sn-p”按钮
2. 点击进入被下拉的字段
3. 按向上或向下箭头进行绘制

希望这个例子有所帮助。

  var canvas = document.getElementById('myCanvas');
  var direction = null;
  var currentx=0, currenty=0;
  var startPoint = {
    x:currentx,
    y:currenty
  };
  var path = [];

  function addLineToPath(line){
    path.push({
      x:line.x,
      y:line.y
    });
  }

  function redrawPath(color){
    canvas.width = canvas.width;
    var context = canvas.getContext('2d');
    context.beginPath();
    context.moveTo(startPoint.x, startPoint.y);
    path.forEach(function(line){
      context.lineTo(line.x, line.y);
    });
    context.lineWidth = 5;
    context.strokeStyle = color;
    context.stroke();
  }

  function handleDirection(){
    switch(direction){
      case 'UP':
        redrawPath('blue');
        break;
      case 'DOWN':
        redrawPath('green');
        break;
    };
  }

  function MoveUp()
  {
    currentx = currentx + 20; // move right: x always becomes bigger
    currenty = currenty - 20; // move up: y always becomes smaller
    addLineToPath({x:currentx,y:currenty}); // update your path to your current position 
    direction = 'UP'; // this determines the path-color
    handleDirection();
  }

  function MoveDown()
  {
    currentx = currentx + 20; // move right: x always becomes bigger
    currenty = currenty + 20; // move down: y always becomes bigger
    addLineToPath({x:currentx,y:currenty}); // update your path to your current position 
    direction = 'DOWN'; // this determines the path-color
    handleDirection();
  }

  var UP = 38;
  var DOWN = 40;
  
  var getKey = function(e) {
    if(window.event) { return e.keyCode; }  // IE
    else if(e.which) { return e.which; }    // Netscape/Firefox/Opera
  };

  document.addEventListener('keydown',function(e){

    var keynum = getKey(e);

    if(keynum === UP) {
      MoveUp();
    }

    if(keynum === DOWN) {
      MoveDown();
    }

  }, false);

<canvas id="myCanvas" width="578" height="200"></canvas>

---

第二个示例（以某种颜色绘制路径，并带有难看的换行符）：

另一个交替改变线条颜色的例子。在 redrawPath 中，每一行都有颜色。此外，在绘制“迷你路径”时，它从前“迷你路径”行的末尾开始：

var canvas = document.getElementById('myCanvas');
var currentx = 0, currenty = 0;
var path = [];

// to check for certain arrows
var UP = 38;
var DOWN = 40;

function addLineToPath(line) {
  path.push({
    x: line.x,
    y: line.y,
    color: line.color
  });
}

function redrawPath() {
  
  canvas.width = canvas.width;
  
  var context = canvas.getContext('2d');
  
  var lastLine = {x:0,y:0};
  path.forEach(function (line) {
    // draws a mini-path line by line
    context.beginPath();
    context.moveTo(lastLine.x, lastLine.y);
    context.lineTo(line.x, line.y);
    context.strokeStyle = line.color;
    context.lineWidth = 5;
    context.stroke();
    context.closePath();
    lastLine = line;
  });
  
}

function MoveUp()
{
  currentx = currentx + 20; // move right: x always becomes bigger
  currenty = currenty - 20; // move up: y always becomes smaller
  addLineToPath({
    x: currentx,
    y: currenty,
    color: 'blue'
  }); // update your path to your current position
  redrawPath();
}

function MoveDown()
{
  currentx = currentx + 20; // move right: x always becomes bigger
  currenty = currenty + 20; // move down: y always becomes bigger
  addLineToPath({
    x: currentx,
    y: currenty,
    color: 'green'
  }); // update your path to your current position
  redrawPath();
}

var getKey = function (e) {
  if (window.event) {
    return e.keyCode;
  } // IE
   else if (e.which) {
    return e.which;
  } // Netscape/Firefox/Opera

};

document.addEventListener('keydown', function (e) {
  var keynum = getKey(e);
  if (keynum === UP) {
    MoveUp();
  }
  if (keynum === DOWN) {
    MoveDown();
  }
}, false);

<canvas id="myCanvas" width="578" height="200"></canvas>

---

第三个例子（以特定颜色绘制平滑路径）：

在本例中，quadraticCurveTo 用于平滑方向变化时出现的那些难看的换行符：

var canvas = document.getElementById('myCanvas');
var currentx = 0, currenty = 0;
var path = [];

// to check for certain arrows
var UP = 38;
var DOWN = 40;

function addLineToPath(line) {
  path.push({
    x: line.x,
    y: line.y,
    color: line.color
  });
}

function redrawPath() {
  canvas.width = canvas.width;
  var context = canvas.getContext('2d');
  var lastLine = {
    x: 0,
    y: 0
  };
  path.forEach(function (line) {
    // draws a mini-path line by line
    context.beginPath();
    context.moveTo(lastLine.x, lastLine.y);

    // a pixel should be enough to have a smoothing effect
    var smoothPixelInX = 1;
    var smoothPixelInY = line.color === 'blue' ? smoothPixelInX : - smoothPixelInX;

    // if there is a change in color there is a line break
    var colorChange = lastLine.color !== line.color;
    if (colorChange) {
      // smooths out ugly line breaks
      context.quadraticCurveTo(lastLine.x, lastLine.y + smoothPixelInY, line.x + smoothPixelInX, line.y - smoothPixelInY);
    }
    else {
      // smooths out ugly line interruptions
      context.lineTo(line.x+smoothPixelInX, line.y-smoothPixelInY);
    }
    context.strokeStyle = line.color;
    context.lineWidth = 5;
    context.stroke();
    context.closePath();
    lastLine = line;
  });
}

function MoveUp()
{
  currentx = currentx + 20; // move right: x always becomes bigger
  currenty = currenty - 20; // move up: y always becomes smaller
  addLineToPath({
    x: currentx,
    y: currenty,
    color: 'blue'
  }); // update your path to your current position
  redrawPath();
}

function MoveDown()
{
  currentx = currentx + 20; // move right: x always becomes bigger
  currenty = currenty + 20; // move down: y always becomes bigger
  addLineToPath({
    x: currentx,
    y: currenty,
    color: 'green'
  }); // update your path to your current position
  redrawPath();
}

var getKey = function (e) {
  if (window.event) {
    return e.keyCode;
  } // IE
   else if (e.which) {
    return e.which;
  } // Netscape/Firefox/Opera

};

document.addEventListener('keydown', function (e) {
  var keynum = getKey(e);
  if (keynum === UP) {
    MoveUp();
  }
  if (keynum === DOWN) {
    MoveDown();
  }
}, false);

<canvas id="myCanvas" width="578" height="200"></canvas>