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

canvas 要素の固有の寸法は座標空間のサイズに等しく、数値は CSS ピクセルで解釈されます。ただし、要素はスタイル シートによって任意のサイズにすることができます。レンダリング中、イメージはこのレイアウト サイズに合わせてスケーリングされます。

（これはここから借りました！繰り返す価値があるからです。）

于 2013-04-10T02:18:50.173 に答える