Javascript HTML5画布在使用ID选择器定义其宽度和高度时执行不一致_Javascript_Html_Canvas

Javascript HTML5画布在使用ID选择器定义其宽度和高度时执行不一致

javascript html canvas

Javascript HTML5画布在使用ID选择器定义其宽度和高度时执行不一致,javascript,html,canvas,Javascript,Html,Canvas,我的html文件非常简单： <body> <canvas id="canvas" width="900" height="400"></canvas> <button onclick="DrawSVG()">Draw SVG</button> </body> face.svg： <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > <rect x=

我的html文件非常简单：

<body>
<canvas id="canvas" width="900" height="400"></canvas>
<button onclick="DrawSVG()">Draw SVG</button>
</body>

face.svg：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
<rect x="0" y="0" width="80" height="80" rx="6" fill="blue" stroke="red" stroke-
width="1px" fill-opacity="0.7" />
</svg>

这似乎是正确的

但当我定义头部的宽度和高度时：

<style type="text/css">
#canvas {
width: 900px;
height: 400px;
}


#帆布{
宽度：900px；
高度：400px；
}

画布上的svg比以前大4倍。区别是什么？

解释如下：

canvas元素的内在维度等于坐标空间，数字以CSS像素表示。然而，该元素可以通过样式表任意调整大小在渲染时，将缩放图像以适应此布局大小。

（我借用了这个，因为它值得重复。）

解释如下：

canvas元素的内在维度等于坐标空间，数字以CSS像素表示。然而，该元素可以通过样式表任意调整大小在渲染时，将缩放图像以适应此布局大小。

（我借用了这个，因为它值得重复。）

可能的重复

<style type="text/css">
#canvas {
width: 900px;
height: 400px;
}