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

Question

我的html文件非常简单：

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

当单击按钮时，我使用canvg.js在画布上绘制SVG。

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>

看来是对的。

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

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

画布上的svg比以前大4倍。 有什么不同？

Answer 1

说明在这里： http : //www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width

canvas元素的固有尺寸等于坐标空间的大小，其数字以CSS像素表示。 但是，可以通过样式表任意设置元素的大小。 在渲染期间，将缩放图像以适合此布局大小。

（我是从这里借来的！因为值得重复。）

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

问题描述

1 个解决方案

解决方案1
1 2013-04-10 02:18:50

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

问题描述

1 个解决方案

解决方案1 1 2013-04-10 02:18:50

解决方案1
1 2013-04-10 02:18:50