javascript - 将负数传递给 lineTo/strikeRect/fillRect

Question

主题说明了一切:您可以将负数传递给 HMTL5 Canvas 中的绘图基元吗？

例如，如果我转换为 (100,100)，我可以使用坐标 (-25,-25) 绘制一个矩形或直线吗？使用 lineTo 进行简单测试表明不是，但没有错误结果。

Answer 1

您可以传递负值。唯一会发生的事情是 Canvas 位图之外的图形将被剪切。

平移 Canvas 会移动其原点 (0,0)。例如，如果您向右和向下平移，并且想要向左和顶部绘制(假设未应用旋转)，您将必须使用负值。

ctx.translate(100, 100);
ctx.beginPath();
ctx.moveTo(-100, -100);
ctx.lineTo(0, 0);
ctx.stroke();

从左上角到 100,100 画一条线。

<强> Online demo