Question

我们说我有以下JavaScript代码：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
canvas.width = 100;
canvas.height = 100;
canvas.lineWidth = 20;
canvas.lineCap = 'round';
canvas.strokeStyle = '#ff0000';
canvas.beginPath();
canvas.moveTo(50, 50);
canvas.lineTo(50, 50);
canvas.stroke();

我告诉浏览器在画布上画一条线，但是从一个位置到完全相同的位置。在实践中，这似乎会导致我测试过的浏览器在该位置呈现一个圆形，就像一条像素线一样，但理论上，它可以被解释为零长度线和没有路径。

如果我指定＆＃34;从50,50到50,50＆＃34;当lineCap是round时，还是我不能依赖的实施细节？

Answer 1

正确，“圈子”是您不能依赖的实施细节。

顺便说一句，那个圆圈实际上是2个半圆。 ; - ）

只有lineCap='butt'才会在x0，y0处停止该行。因此，如果渲染零长度的对接线段，您将看不到任何内容。

lineCap='round'会将段扩展到x0，y0之外，并且舍入是线宽的一半。 lineCap='square'也是如此。

所以，你可能最终得到2个半圈，每个半径为半径= 20/2 = 10，在视觉上形成一个完整的圆圈。你会在Chrome＆amp;中看到一个圆圈。 FF，但在Edge中你什么都看不到。

当为lineTo（）指定相同的坐标时会发生什么？

1 个答案: