所以我对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);
总之,这段代码只是在画布上填充了颜色变化的平铺矩形。但是,如何放大和缩小这样的东西呢?
答案 0 :(得分:2)
您需要context
的{{3}}方法。
请注意,一旦你在画布上画了一些东西,它就无法真正缩放或缩放 - 你必须以新的“缩放级别”重新绘制整个画布。