javascript - 如何删除椭圆之间的线连接？ JS Canvas

Question

所以我试图在 Canvas 上用Javascript画一张脸，微笑是使用ellipse(x, y, rX, rY, rot, start, end。我关闭了路径(closePath();)，然后是描边命令 (lines();)。这会绘制椭圆，看起来像半圆。但这也会绘制连接半圆两端的笔画，我不想要这样。它看起来像这样:

var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var w = 500;
var h = 300;

window.onload = function() {
  c.style.backgroundColor = '#aaa';
  c.width = w;
  c.height = h;
  c.tabIndex = '1';
  c.style.outline = 'none';
  c.style.display = 'block';
  c.style.margin = '0 auto';
  c.style.position = 'relative';
  c.style.top = '50px';
  document.body.style.margin = '0';
  document.body.appendChild(c);
}

setInterval(function() {
  ctx.clearRect(0, 0, w, h);

  ctx.beginPath();
  ctx.ellipse(w / 2, h / 2, 30, 35, 0, 0, 2 * Math.PI);
  ctx.closePath();

  ctx.fillStyle = '#cf9454';
  ctx.fill();
  ctx.stroke();

  ctx.beginPath();
  ctx.ellipse(w / 2 - 10, h / 2 - 10, 2, 2, 0, 0, 2 * Math.PI);
  ctx.moveTo(w / 2 + 10, h / 2 - 10);
  ctx.ellipse(w / 2 + 10, h / 2 - 10, 2, 2, 0, 0, 2 * Math.PI);
  ctx.closePath();

  ctx.stroke();
  ctx.fillStyle = '#000';
  ctx.fill();

  ctx.beginPath();
  ctx.ellipse(w / 2, h / 2 + 10, 16, 12, 0, 0, 1 * Math.PI);
  ctx.closePath();

  ctx.stroke();
}, 30);

Answer 1

您应该简单地省略最后一个 closePath() 调用。其意图在MDN's documentation中描述。 :

The CanvasRenderingContext2D.closePath() method of the Canvas 2D API attempts to add a straight line from the current point to the start of the current sub-path.

它有效地将直线添加到“嘴”形状中。所以把它忽略掉:

var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var w = 500;
var h = 140; // reduced to make the smiley appear within the snippet area

window.onload = function() {
  c.width = w;
  c.height = h;
  c.tabIndex = '1';
  c.style.backgroundColor = '#aaa';
  c.style.outline = 'none';
  c.style.display = 'block';
  c.style.margin = '0 auto';
  c.style.position = 'relative';
  c.style.top = '50px';
  document.body.style.margin = '0';
  document.body.appendChild(c);
}

setInterval(function() {
  ctx.clearRect(0, 0, w, h);

  ctx.beginPath();
  ctx.ellipse(w / 2, h / 2, 30, 35, 0, 0, 2 * Math.PI);
  ctx.closePath();

  ctx.fillStyle = '#cf9454';
  ctx.fill();
  ctx.stroke();

  ctx.beginPath();
  ctx.ellipse(w / 2 - 10, h / 2 - 10, 2, 2, 0, 0, 2 * Math.PI);
  ctx.moveTo(w / 2 + 10, h / 2 - 10);
  ctx.ellipse(w / 2 + 10, h / 2 - 10, 2, 2, 0, 0, 2 * Math.PI);
  ctx.closePath();

  ctx.stroke();
  ctx.fillStyle = '#000';
  ctx.fill();

  ctx.beginPath();
  ctx.ellipse(w / 2, h / 2 + 10, 16, 12, 0, 0, 1 * Math.PI);
  //ctx.closePath(); //<----- remove this

  ctx.stroke();
}, 30);

请注意，Unicode 有表情符号字符。也许它们对您的项目有用？我还将一些样式移至 CSS 定义中。 setInterval 目前没用；但我想你拥有它是为了将来的目的。

例如:

var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var w = 500;
var h = 140; // reduced to make the smiley appear within the snippet area

window.onload = function() {
  c.width = w;
  c.height = h;
  c.tabIndex = 1;
  document.body.appendChild(c);
  ctx.font = "70px Verdana";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle"; 
  setInterval(function() {
    ctx.clearRect(0, 0, w, h);
    ctx.fillText("🙂", w/2, h/2);
  }, 30);
}

canvas {
  background-color: #aaa;
  outline: none;
  display: block;
  margin: 0 auto;
  position: relative;
  top: 50px;
}
body { margin: 0; }