画布调整大小后，画布内的所有东西都变大了

当我第一次开始这个项目时，我的画布尺寸为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

画布调整大小后，画布内的所有东西都变大了

回答

相关问题