javascript - 绘制路径 - Canvas

Question

我想像这样在 Canvas 上画一条简单的路径:

我已经尝试过了(我也不确定如何创建半径为 440、400 的点):

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 0);
ctx.lineTo(440, 400);
ctx.lineTo(0, 500);
ctx.lineTo(0, 0);
ctx.fill();

但它只显示一个黑色的 600x600 矩形 https://jsfiddle.net/aaroniker/pmgkymch/

谢谢!

Answer 1

Canvas 元素包含与 canvas 元素的 width 和 height 属性相同尺寸的图像的栅格化像素数据，默认分别为 300 和 150。绘制到 Canvas 元素时使用 Canvas 的像素坐标，除非上下文绘制转换生效。

在 CSS 中设置 Canvas 元素的宽度和高度，缩放 Canvas 在屏幕上显示时将其调整为 CSS 中设置的尺寸。与缩放普通图像元素一样，如果将小 Canvas 缩放到太大尺寸， Canvas 图像质量会明显下降。

答案 A

您看到一个黑色方 block 是因为您使用 600 x 600 坐标在 300 x 150 像素的 Canvas 上绘图。填充绘制的超大路径填充所有实际 Canvas 像素。由于 CSS 缩放，300 x 150 像素的 Canvas 呈现为 600 x 600 的屏幕区域。

答案B

上下文的路径绘制arcto 方法用于创建圆 Angular ，但如果您继续绘制一条到已知点的线，则无需计算它离开绘图位置的位置。

在此示例中，我将 HTML 中的 Canvas 元素尺寸设置为 600 x 600，并在 CSS 中将其缩放为不同的大小 (150px x 150px)

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var radius = 100; // a number
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(500, 0);
    ctx.arcTo( 440, 400, 0, 500, radius) 
    ctx.lineTo( 0, 500); // join end of arc to next point
    ctx.lineTo(0, 0);
    ctx.fill();
  }
}

draw();

#canvas {
  width: 150px;
  height: 150px;
}

<canvas id="canvas" width="600", height="600"></canvas>