如何改变HTML5画布的原点？

Question

我找不到关于HTML5 Canvas的答案。我能否更改原点的坐标，以便我的图形一起向右移动15像素（仅作示例）。以下是给定的HTML和CSS：

<canvas id="g" width="auto" height="auto">Your browser doesnt support canvas tag</canvas>

CSS：

canvas, section {
    display: block;
}    

#g {
    position: absolute;
    width:100%;
    height:100%;
    overflow:hidden; 
}

- Jurudocs

---

重新绘制整个上下文是一个选项吗？还是你只想用CSS移动画布元素？ - arahaya

@arahaya 重新绘制会很棒！ - Jurudocs

Answer 1

听起来你需要一个翻译转换。根据你在上下文中做的其他事情，你可能还需要调用save()和restore()。

var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.save();
ctx.translate(15, 0);
// ... do stuff with the transformed origin
ctx.restore();
// ... do stuff with the canvas restored to its original state (if necessary)

- Joe White

---

请注意，如果需要，您可以通过调用 resetTransform() 来重置原点，而不是尝试通过所有更改来“翻译”回去。有关详情，请参见MDN。 - brichins