如何在画布上绘制负的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>

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

这就是我想要的

Answer 1

您可以使用ctx.translate，ctx.transform或ctx.setTransform将原点（0,0）放置在任意位置。

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

setTransform的6个参数是。

• 首先2个向量，描述渲染像素的顶部边缘。 X轴x : 1, y : 0
第二秒，向量描述渲染像素的左边缘。 Y轴x : 0, y : 1
• 最后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