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

HTML5 canvas perform inconsistent when define its width and height using ID selector

本文关键字：高度 不一致 执行 定义 选择器 ID HTML5      更新时间：2023-09-26

我的html文件很简单:

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

当点击按钮时，我在画布上绘制SVG，使用canvas .js

var opts = {
  ignoreMouse: false,
  ignoreClear: true,
  ignoreDimensions : true,
  offsetX: 0,
  offsetY: 0
};
canvg(canvas, "face.svg", opts);

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>

似乎是正确的。

但是当我在head中定义宽度和高度时:

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

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

说明如下:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width

canvas元素的固有尺寸等于元素的大小坐标空间，用CSS像素解释数字。然而,元素可以通过样式表任意调整大小。在

我从这里借的!因为它值得重复)

相关文章：