使用 JavaScript 画布绘制水壶

Question

var c = document.getElementById("view");
var ctx = c.getContext("2d");
ctx.moveTo(100, 100);
ctx.quadraticCurveTo(150, 60, 200, 100);
ctx.quadraticCurveTo(150, 140, 100, 100);
ctx.bezierCurveTo(110, 150, 90, 160, 100, 200)
ctx.moveTo(205, 105)
ctx.bezierCurveTo(170, 150, 210, 140, 205, 200)
ctx.quadraticCurveTo(152.5, 240, 100, 200)
ctx.moveTo(100, 165)
ctx.arc(100, 140, 25, 0.5 * Math.PI, 1.55 * Math.PI)
ctx.moveTo(100, 150)
ctx.quadraticCurveTo(152.5, 120, 195, 150);
ctx.quadraticCurveTo(152.5, 170, 100, 150)
ctx.stroke();

<canvas id="view" width=900 height=400 style="border: 1px solid red"></canvas>

在上面的代码中，我试图画一个水壶，但无论我尝试了多少，它都没有接近完美。无论如何改进我的代码？

Answer 1

你应该把它移到一个函数中并使用一个点或原点。这样你就可以在任何一对坐标上绘制这个形状。

问题是您的第二个

moveTo

电话。起点不在

(x + 100, y)

.

注意： 请务必先致电

ctx.beginPath()

，然后再完成

ctx.stroke()

。此外，如果您要有一系列路径语句，请务必添加一条注释来描述正在绘制路径的哪一部分。

const ctx = document.getElementById('view').getContext('2d');

const main = () => {
  ctx.translate(0.5, 0.5);

  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  ctx.strokeStyle = 'hsl(0, 100%, 75%)';
  drawJug(ctx, 50, 40);

  ctx.strokeStyle = 'hsl(120, 100%, 75%)';
  drawJug(ctx, 200, 40);
  
  ctx.strokeStyle = 'hsl(180, 100%, 75%)';
  drawJug(ctx, 350, 40);
};

const drawJug = (ctx, x, y) => {
  ctx.beginPath();
  // Top-left
  ctx.moveTo(x, y);
  // Opening curve-up
  ctx.quadraticCurveTo(x + 50, y - 40, x + 100, y);
  // Opening curve-down
  ctx.quadraticCurveTo(x + 50, y + 40, x, y);
  // Left side
  ctx.bezierCurveTo(x + 10, y + 50, x - 10, y + 60, x, y + 100);
  ctx.moveTo(x + 100, y); // Here is the problem
  // Right side
  ctx.bezierCurveTo(x + 70, y + 50, x + 110, y + 40, x + 105, y + 100);
  // Bottom
  ctx.quadraticCurveTo(x + 52.5, y + 140, x, y + 100);
  ctx.moveTo(x, y + 65);
  // Handle
  ctx.arc(x, y + 40, 25, 0.5 * Math.PI, 1.55 * Math.PI);
  ctx.moveTo(x, y + 50);
  // Liquid curve-up
  ctx.quadraticCurveTo(x + 52.5, y + 20, x + 95, y + 50);
  // Liquid curve-down
  ctx.quadraticCurveTo(x + 52.5, y + 70, x, y + 50);
  ctx.stroke();
};

main();

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
}

<canvas id="view" width="500" height="180"></canvas>