畫布調整大小後，畫布內的所有東西都變大了

當我第一次開始這個項目時，我的畫布尺寸爲1400px寬，480px高。我意識到，我將需要使畫布與窗口本身的大小相同，所以我做了這些，畫布內的任何東西都放大了。我將drawImage();設置爲300像素寬和180像素高，並且比這更大，圖像實際上與畫布寬度相同。有什麼建議麼？這裏的鏈接到項目：畫布調整大小後，畫布內的所有東西都變大了

http://brycemckenney.com/animation-app

謝謝你們！

來源

2013-04-21 Bryce

您已通過CSS設置尺寸，而不是（圖像）畫布的物理尺寸。

你的代碼的相關部分（爲他人在將來讀）是：

var canvas = document.getElementById("canvas1"); 
var ctx = canvas.getContext("2d"); 
var windowHeight = $(window).height(); 
var windowWidth = $(window).width(); 
$(canvas).css({ 
    height: windowHeight - 8, 
    width: windowWidth - 8 
});

把它看成是這樣的：假設你有一個正常的JPG圖像。
這jpg有它自己的'物理'尺寸（又名寬度和高度）。
都 HTML 和 CSS你可以設置你希望瀏覽器渲染（縮放）圖片的尺寸（以px，百分比等）（嘿，圖片已經有一個不可改變的大小吧？）。

現在對於帆布：
爲了帆布具有物理寬度/高度，必須設置.width和畫布元件本身的.height，或者HTML或每JavaScript的（一個副作用是設定物理尺寸是根據規格畫布將自行清除）。
然後到比例尺圖片（就像你用上面的jpg例子做的那樣）你使用css（再次在px/percent/etc中）。
我認爲這是一個聰明的解決方案，將新的canvas-element添加到HTML-Spec！

所以，上舍入：
甲帆布帶的寬度和其測量900x900px將被按比例放大的3倍呈現爲一個容器（如document.body的）100％300像素的高度！
反過來（縮小比例）可以讓你畫出更清晰的線條！

希望這有助於你的理解！

來源

2013-04-21 03:39:58 GitaarLAB

太棒了！非常感謝！我剛剛添加了'canvas.width = windowWidth - 8;'和高度一樣，它工作。謝謝！ – Bryce 2013-04-21 21:01:13

畫布調整大小後，畫布內的所有東西都變大了

回答

相關問題