Płótno jest rozciągane przy użyciu CSS, ale normalne z właściwościami „szerokość” / „wysokość”

Mam 2 płótnach używa atrybutów HTML widthi heightwielkości to, CSS innych zastosowań:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1 wyświetla się tak, jak powinien, ale nie compteur2. Treść jest rysowana za pomocą JavaScript na kanwie 300 x 300.

Dlaczego występuje różnica w wyświetlaniu?

Wygląda na to, że atrybuty widthi heightokreślają szerokość lub wysokość układu współrzędnych obszaru roboczego, podczas gdy właściwości CSS po prostu określają rozmiar pola, w którym zostanie pokazany.

Wyjaśniono to na stronie http://www.whatwg.org/html#attr-canvas-width (wymaga JS) lub http://www.whatwg.org/c#attr-canvas-width (prawdopodobnie zje twój komputer) :

canvasElement ma dwa atrybuty do kontroli rozmiaru bitmapy tego elementu: widtha height. Te atrybuty, jeśli są określone, muszą mieć wartości, które są poprawnymi nieujemnymi liczbami całkowitymi . Te zasady analizowania liczby całkowite nieujemne muszą być stosowane w celu uzyskania ich wartości liczbowych. Jeśli brakuje atrybutu lub parsowanie jego wartości zwraca błąd, należy zamiast tego użyć wartości domyślnej. Te widthwartości domyślne atrybutów do 300, i heightdomyślne atrybutów 150.

Aby ustawić widthi heightpotrzebujesz, możesz użyć

canvasObject.setAttribute('width', '475');

W przypadku <canvas>elementów CSS reguluje widthi heightustawia rzeczywisty rozmiar elementu canvas, który zostanie narysowany na stronie. Z drugiej strony atrybuty HTML widthi heightustawia rozmiar układu współrzędnych lub „siatki”, z której będzie korzystać interfejs API canvas.

Rozważmy na przykład to ( jsfiddle ):

var ctx = document.getElementById('canvas1').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30);

canvas {
  border: 1px solid black;
}

<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

Oba mają narysowane to samo w stosunku do wewnętrznych współrzędnych elementu canvas. Ale w drugim kanwie czerwony prostokąt będzie dwa razy szerszy, ponieważ kanwa jako całość jest rozciągana na większym obszarze zgodnie z regułami CSS.

Uwaga: Jeśli reguły CSS dla widthi / lub heightnie zostaną określone, przeglądarka użyje atrybutów HTML, aby zmienić rozmiar elementu, tak aby 1 jednostka tych wartości na stronie wynosiła 1 piks. Jeśli te atrybuty nie są wymienione, a następnie będą one domyślnie widthof 300a heightod 150.

Płótno zostanie rozciągnięte, jeśli ustawisz szerokość i wysokość w swoim CSS. Jeśli chcesz dynamicznie manipulować wymiarem płótna, musisz użyć JavaScript w następujący sposób:

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');

Przeglądarka używa szerokości i wysokości css, ale element canvas jest skalowany w oparciu o szerokość i wysokość canvas. W javascript przeczytaj szerokość i wysokość css i ustaw do tego szerokość i wysokość płótna.

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();

Korekta shannimal

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))

CSS ustawia szerokość i wysokość elementu canvas, więc wpływa na przestrzeń współrzędnych, pozostawiając wszystko rysowane pochylone

Oto mój sposób na ustawienie szerokości i wysokości za pomocą Vanilla JavaScript

canvas.width = numberForWidth

canvas.height = numberForHeight

Jeśli chcesz dynamicznego zachowania opartego np. Na zapytaniach o media CSS, nie używaj atrybutów szerokości i wysokości obszaru roboczego. Użyj reguł CSS, a następnie, przed uzyskaniem kontekstu renderowania na płótnie, przypisz atrybutom szerokość i wysokość style szerokości i wysokości CSS:

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...