[英]How do I zoom on a canvas?
我是Java和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);
總而言之,此代碼僅用變化顏色的平鋪矩形填充畫布。 但是,如何放大和縮小這種東西呢?
您將需要context
的scale方法。
請注意,一旦在畫布上繪制了某些內容,就無法真正對其進行縮放或縮放-您必須在新的“縮放級別”上重新繪制整個畫布。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.