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

Question

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

下面是我的示例代码

<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>

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

这就是我要的

标签： htmlcanvashtml5-canvas

Answer 1

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

ctx.translate,ctx.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);

的 6 个参数setTransform是。

• first 2 描述渲染像素顶部边缘的向量。X 轴x : 1, y : 0
• second 2 描述渲染像素左边缘的向量。Y 轴x : 0, y : 1
• last 2 在画布像素中的位置，位于渲染像素 0,0 的左上角

因此，您可以通过更改前四个来扩展

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