绘制路径 - 画布

Question

我想在画布中绘制一条简单的路径：

我已经尝试过了（我也不确定如何创建半径为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

正如我在评论中所说，当您在CSS中定义画布尺寸时，坐标系会变形。使用内联样式（我已经完成）或将其编码到JS中。对于你需要的弧，使用ctx.arcTo（x1，x2，y1，y2，r），其中x1，y1是你正在摆动的点（在你的情况下是440,400）和x2，y2是你想要的弧与你的数字相遇，r是半径。 https://www.w3schools.com/tags/canvas_arcto.asp

＆＃13;

＆＃13;

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(500, 0);
    ctx.lineTo(441.2, 392);
    ctx.arcTo(440, 400, 431.2, 402, 8);
	ctx.lineTo(0, 500);
    ctx.lineTo(0, 0);
	ctx.fillStyle = "#008AFF";
    ctx.fill();
  }
}

draw();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

回答A

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

回答B

上下文的路径绘制arcto方法用于创建圆角但您不需要计算它离开绘图位置的位置，前提是您继续绘制一条线到a已知点。

在这个例子中，我将HTML中的画布元素尺寸设置为600 x 600，并在CSS中将其缩放为不同的尺寸（150px x 150px）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;