html - 如何在 Canvas 上绘制负 x 和 y 值

Question

Canvas 的起点是左上角，即 x,y(0,0)。我可以在 Canvas 上绘制正值。

下面是我的示例代码

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

但如果 x 和 y 的值为负，我无法绘制 x 和 y。下面的代码不起作用

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(-200,-100);
ctx.stroke();
</script>

我想在 Canvas 上绘制负值。这可能吗？

这就是我想要的

Answer 1

您可以使用 ctx.translate、ctx.transform 或 ctx.setTransform< 将原点 (0,0) 定位在任何您喜欢的位置。

ctx.translate, ctx.transform 是相对于当前的transform。 ctx.setTransform 是绝对的。

我发现最简单的方法是使用 ctx.setTransform

   const W = ctx.canvas.width, H = ctx.canvas.height;
   ctx.setTransform(1,0,0,1,0,0); // resets the transform to clear
   ctx.clearRect(0,0,W,H); // clears the canvas

   ctx.setTransform(1, 0, 0, 1, W / 2, H / 2); // moves the origin to the center of
                                               // the canvas

   ctx.strokeRect(-200,-200, 190, 190);

setTransform 的 6 个参数是。

• 首先 2 描述渲染像素顶部边缘的向量。 X 轴 x : 1, y : 0
• second 2 描述渲染像素左边缘的向量。 Y 轴 x : 0, y : 1
• last 2 渲染像素 0,0 左上角的 Canvas 像素位置

因此你可以通过改变前四个来扩展

ctx.setTransform(2, 0, 0, 2, W / 2, H / 2); // zooms in by 2 with origin at center
ctx.setTransform(0.5, 0, 0, 0.5, W / 2, H / 2); // zooms out by 2 with origin at center