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像素解释数字。然而，元素可以通过样式表任意调整大小。的在渲染时，图像会缩放以适合此布局大小。

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

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

1 个答案: