查看多个动态画布

发布于 2024-11-09 04:59:16 字数 442 浏览 0 评论 0原文

我正在生成多个画布并将它们排列在屏幕的不同部分。每个画布上都有一个绘图(使用 javascript 完成)或文本(使用 html 完成),可能太小而无法看到。我正在使用 Shadowbox 以便用户可以单击特定的画布并查看展开的视图。

我的问题是以这样的方式制作画布,以便可以使用 Shadowbox 放大它们。因为这些画布是动态绘制的(绘制的内容基于用户输入),所以它们不是图像。处理此问题的最佳方法似乎是创建临时图像,这些图像在画布中以较小尺寸显示,然后在 Shadowbox 中以完整尺寸显示。

创建画布的临时图像是最好的方法吗?或者有更好的方法使用 HTML5 和/或 Shadowbox 吗?我对 HTML5/使用 javascript/Shadowbox 绘图不太了解,所以建议将不胜感激。

I'm generating multiple canvases and arranging them on different parts of the screen. Each canvas either has a drawing (done using javascript) or text (done using html) on it, likely too small to see. I am using Shadowbox so that a user can click on a particular canvas and see an expanded view.

My problem is making the canvases in such a way that they can be zoomed into with Shadowbox. Because these canvases are dynamically drawn (what's drawn is based on user input), they aren't images. It seems like the best way to handle this is to create temporary images that are displayed at a smaller size in the canvas and then displayed at full size in the Shadowbox.

Is creating temporary images of canvases the best approach? Or is there a better way using HTML5 and/or Shadowbox? I don't know much about HTML5/drawing with javascript/Shadowbox, so advice would be appreciated.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

心的位置 2024-11-16 04:59:16

如果你想在画布上画一些更小的东西,你所要做的就是使用

context.scale(x, y)

初始比例是 1,1。将比例设置为 0.5,0.5 将使绘制的所有内容变小。

所有绘图代码都可以保持不变,只是看起来更小。

您将需要阅读所有画布上下文转换以及如何使用它们。 Mozilla 教程非常好:

https://developer.mozilla.org/en/Canvas_tutorial/Transformations< /a>

If you want to draw something smaller on the canvas, all you have to do is use

context.scale(x, y)

The initial scale is 1,1. Setting the scale to 0.5, 0.5 will make everything drawn smaller.

All your drawing code can stay the same, it will just appear smaller.

You'll want to read up on all the canvas context transformations and how to use them. The Mozilla tutorial is pretty good:

https://developer.mozilla.org/en/Canvas_tutorial/Transformations

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文