如何放大画布？答案

【问题标题】：How do I zoom on a canvas?如何放大画布？
【发布时间】：2012-03-27 01:45:24
【问题描述】：

我对 Javascript 和 HTML5 还很陌生，我正在尝试弄清楚如何在画布上进行缩放。假设我的 Javascript 代码如下所示：

window.addEventListener('load', function() {
            var theCanvas = document.getElementById('myCanvas');
            theCanvas.style.border = "black 1px solid";
            if(theCanvas && theCanvas.getContext) {
                var context = theCanvas.getContext('2d');

                if(context) {
                    var x = 10;
                    var y = 10;
                    var z = 255;
                    var color = "rgb(0," + z + ",0)";
                    context.fillStyle = "rgb(100,0,0)";
                    for(var y = 0; y <= 290; y += 10) {

                        for(var x = 0; x <= 290; x += 10) {
                            if(z >= 1) {
                                z -= 1;
                            }
                            color = "rgb(0," + z + ",0)";

                            if(x % 20 === 0) {
                                context.fillStyle = color;
                            } else {
                                context.fillStyle = color;
                            }
                            context.fillRect(x, y, 10, 10);
                        }
                    }

                }

            }
        }, false);

总之，这段代码只是用颜色变化的平铺矩形填充画布。但是如何放大和缩小这样的东西呢？

【问题讨论】：

标签： javascript canvas html5-canvas zooming dom-events

【解决方案1】：

您需要context 的scale 方法。

请注意，一旦你在画布上绘制了一些东西，它就不能真正缩放或缩放——你必须在新的“缩放级别”重新绘制整个画布。

【讨论】：