调整大小和缩放HTML5画布和内容

我正在研究将绘图界面（如Paint或Photoshop）合并为HTML5画布元素的应用程序。调整大小和缩放HTML5画布和内容

我希望能够动态调整canvas元素及其上的像素数据以模拟缩放功能。我的想法有一些包含画布元素的视口。然后，我可以调整视图内的画布及其内容的大小（保持相同的大小）。

我该如何最好地实现此功能？

2011-08-11 Mark Brouch

相关环节能省“屏幕截图”使用'.toDataURL（）'，然后调整画布上，并得出截图捉襟见肘。然而，它看起来很模糊，因为画布不会'像素化'地调整大小。 – pimvdb

可能的重复：http://stackoverflow.com/questions/331052/how-to-resize-html-canvas-element –

通过引入另一个画布，您可以非常容易地通过从绘图表面分离显示来执行此操作。创建一个隐藏的画布使用

var canvas = document.createElement('canvas');

然后将您的整个场景绘制到此画布。然后将此画布的内容绘制到使用drawImage方法（也可能会接收画布而不是图像）的用户实际可见的另一个画布。如果要绘制放大的场景，可以通过将隐藏画布上的源矩形（其屏幕上的源矩形（sy,sx,sw和sh参数drawImage）绘制到较小的图形）进行绘制。这会给你缩放效果。但是，如果您完全重新绘制画布上的每一帧，您也可以简单地看一下画布对象的scale method。

来源

2011-08-11 22:54:10

谢谢，你给了我一些好地方开始！ –

我会试着+1然后:) –

我试过了，但我认为我的帐户还没有这个能力。 :( 你仍然对工作做得很满意。：D –

我在canvas元素及其内容上使用transform：scale（）方法成功。但是，在需要使用iframe引入canvas元素并且iframe上发生transform：scale的情况下，它在safari上运行，但不在移动Safari中运行。下面

https://stackoverflow.com/questions/11265483/inconsistencies-when-transform-scale-on-iframe-containing-canvas

来源

2012-06-29 16:35:58 PrimeLens

调整大小和缩放HTML5画布和内容

回答

相关问题