Question

我无法找到如何在moveTo（）之后获得实际的绘制光标位置。看看我的代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(10, 20);
// here i want to get from "ctx" actual offset
ctx.lineTo(20,30);
ctx.closePath();

有没有办法或我必须在我自己的变量offsetX，offsetY？

中存储偏移量

Answer 1

我认为你的意思是你有一堆相对路径命令，你想要移动它们。

例如，要在左上角绘制一个三角形，您可以写：

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,0);
ctx.lineTo(50,100);
ctx.closePath(); // makes the last line for you
ctx.stroke();

那么如果你想使用相同的路径但是从（175,175）开始绘制三角形呢？您需要做的就是翻译上下文，而不是更改moveTo和所有后续绘图命令。

ctx.save();
ctx.translate(175, 175);

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,0);
ctx.lineTo(50,100);
ctx.closePath(); // makes the last line for you
ctx.stroke();

// save/restore lets you undo the translation so the next object starts at (0,0)
// you could just call ctx.translate(-175, -175); at the end instead though
ctx.restore();

翻译上下文会更改绘图表面的原点，并允许您使用它移动所有坐标（暂时或不临时）。这意味着您可以使用ctx.translate在整个地方使用相同的命令定义一组路径并重绘它们。

在这里看到两个三角形：

http://jsfiddle.net/qzYFC/

HTML5 Canvas：绘图光标的位置

1 个答案: