1

我的 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);

脸.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 倍。有什么不同？

4

1 回答 1

1

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

画布元素的内在尺寸等于坐标空间的大小，数字以 CSS 像素解释。但是，可以通过样式表任意调整元素的大小。在渲染过程中，图像被缩放以适应此布局大小。

（我从这里借了这个！因为它值得重复。）

于 2013-04-10T02:18:50.173 回答