HTML5 Canvas：缩放 [英] HTML5 Canvas: Zooming

问题描述

有什么简单的方法如何放大和缩小在画布（JavaScript）？基本上我有一个400x400px的画布，我想用mousedown（2x）放大，然后用mouseup回去。

Is there any easy way how to zoom in and back out in canvas (JavaScript)? Basically I have a 400x400px canvas and I'd like to be able to zoom in with 'mousedown' (2x) and go back with 'mouseup'.

天googling，但没有运气到目前为止。 ：

Spent last two days googling, but no luck so far. :(

感谢您的帮助。

推荐答案

因此，在绘制图像之前，将上下文缩放到所需的缩放级别：

So before you draw the image scale the context to the zoom level you want:

ctx.scale(2, 2) // Doubles size of anything draw to canvas.

我在这里创建了一个小例子 http：/ /jsfiddle.net/mBzVR/4/ ，它使用drawImage和scale来放大mousedown，然后在mouseup上放大。

I've created a small example here http://jsfiddle.net/mBzVR/4/ that uses drawImage and scale to zoom in on mousedown and out on mouseup.

这篇关于HTML5 Canvas：缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！