如何更改html5画布的原点？

发布于 2024-12-25 17:38:30 字数 382 浏览 1 评论 0原文

我找不到 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; 
}

原文

I couldn't find answers for html5 canvas. Can I change the coordinates of the origin, so that my grafics will move altogether to the right for 15px (just an example). Given the following html and 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; 
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

污味仙女 2025-01-01 17:38:30

听起来你需要一个翻译转换。根据您对上下文执行的其他操作，您可能还需要调用 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)

Sounds like you need a translate transform. Depending on what else you're doing with the context, you may also need to call save() and 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)

回复收藏 0 原文

~没有更多了~