最近我在HTML5和Js中编写了一个简单的平台游戏。我的背景图像宽度为600像素，高度为400像素，具体取决于我如何定义画布的大小。
如果我使用元素属性并像这样定义它的大小：<canvas width="600" height="400">我得到了预期的结果;图像完美地位于画布内。
另一方面，如果我通过给画布ID定义画布大小然后在CSS文件中将其设置为样式：#canvas { width: 600px; height: 400px; }，或者只是将其设置为内联样式，则会出现图像拉伸并且根本不适合画布，尽管值相同。
为什么这些声明方法的呈现方式不同？
答案 0 :(得分：3)
画布尺寸与画布显示尺寸之间存在差异。
HTML属性设置画布尺寸，用于确定在画布上绘制对象的方式。
CSS样式设置画布显示大小，该大小决定了在浏览器中绘制画布的大小。如果显示尺寸与尺寸不同，则绘制时画布将被拉伸。
如果您只定义尺寸，那么它也将用作显示尺寸，即画布按比例1：1绘制。
如果您只定义显示尺寸，尺寸将获得默认值300倍150。