javascript - Javascript Canvas我不想在椭圆的中间描边

因此，我尝试在画布上使用Javascript绘制面孔，而微笑使用的是ellipse(x, y, rX, rY, rot, start, end。我关闭了路径（closePath();），然后使用笔触命令（stroke();）。绘制椭圆，看起来像一个半圆形。但这也画了一个连接半圆的两端的笔触，我不希望这样。看起来像这样：

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

最佳答案

您应该简单地忽略最后一个closePath()调用。其目的在MDN's documentation中进行了描述：


  Canvas 2D API的CanvasRenderingContext2D.closePath()方法尝试从当前点到当前子路径的起点添加一条直线。


它有效地将该直线添加到“嘴”形。因此，只需将其省略：

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; }