0

当我第一次开始我正在从事的这个项目时，我的画布尺寸为 1400 像素宽和 480 像素高。我意识到稍后我需要使画布与窗口本身的大小相同，所以我这样做了，画布内的所有东西都放大了或其他东西。我将 a 设置drawImage();为 300 px 宽和 180 px 高，它比这大很多，图像实际上与现在的画布宽度相同。有什么建议么？这是该项目的链接：

http://brycemckenney.com/animation-app

感谢你们！

4

1 回答 1

0

您已通过 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、百分比等为单位）（嘿，图片已经具有不可变的尺寸，对吧？）。

现在画布：
为了使画布具有物理宽度/高度，您必须在 HTML 或每个 javascript 中设置画布元素本身的.widthand .height（副作用是设置物理尺寸是画布将根据规范自行清除）。
然后缩放图像（就像您对上面的 jpg 示例所做的那样），您使用 css（再次在 px/percent/etc 中）。
我认为这是一个巧妙的解决方案，可以将新的 canvas-element 添加到 HTML-Spec！

因此，向上取整：
宽度和高度为 300 像素的画布呈现为 900x900 像素的容器（如 document.body）的 100% 将被放大 3 倍！
反过来（按比例缩小）可以让你画出更清晰的线条！

希望这有助于您的理解！

于 2013-04-21T03:39:58.680 回答