HTML5 холст выполнять непоследовательно, когда определить его ширину и высоту, используя селектор ID

Мой HTML-файл очень прост:HTML5 холст выполнять непоследовательно, когда определить его ширину и высоту, используя селектор ID

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

Когда нажмите кнопку Обращаю SVG на холсте, используя canvg.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>

кажется правильным.

Но когда я определить ширину и высоту в голове:

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

SVG на холсте в 4 раза больше, чем раньше. Какая разница?

источник

2013-04-10 slayerxj

возможный дубликат [Размер HTML5 Canvas с помощью CSS в зависимости от элемента атрибутов] (http://stackoverflow.com/questions/5034529/size -of-html5 холст-через-CSS-против-элементов-атрибутов) – bfavaretto

Объяснение здесь: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width

Внутренние размеры элемента холста равен размеру координатного пространства, с номерами интерпретируемых в CSS пикселей. Однако, элемент может быть произвольно задан таблицей стилей. Во время визуализации изображение масштабируется в соответствии с размером макета.

(я позаимствовал это из here! потому, что это стоит повторить.)

источник

2013-04-10 02:18:50 adeneo

HTML5 холст выполнять непоследовательно, когда определить его ширину и высоту, используя селектор ID

ответ

Смежные вопросы