我不明白为什么下面的代码片段会产生不同的结果,因为 css 会在放大时缩放 Canvas ,
<style>
#canvas {
width: 800px;
height: 600px;
}
</style>
<canvas id="canvas"></canvas>
与这种方法相比(按预期工作):
<canvas id="canvas" width="800px" height="600px"></canvas>
最佳答案
想一想如果您有一个 32x32 的 JPG(它总共有 1024 个像素)但通过 CSS 指定它应该显示为 width 会发生什么:800px;高度:16px
。同样的事情也适用于 HTML Canvas:
canvas 元素本身的
width
和height
属性决定了您可以在多少像素上绘制。如果不指定 Canvas 元素的高度和宽度,则 per the specs :
“宽度属性默认为300,高度属性默认为150。”width
和height
CSS 属性控制元素在屏幕上显示的大小。如果未设置 CSS 尺寸,则使用元素的固有尺寸进行布局。
如果您在 CSS 中指定的尺寸与 Canvas 的实际尺寸不同,则必须根据需要由浏览器拉伸(stretch)和挤压以显示。您可以在此处查看示例:http://jsfiddle.net/9bheb/5/
关于css - 通过 CSS 与元素属性对比的 HTML5 Canvas 大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30842453/