Tuval CSS kullanılırken gerilir ancak "genişlik" / "yükseklik" özellikleriyle normaldir

2 tuval var, biri HTML öznitelikleri kullanır widthve heightboyutlandırmak için, diğer CSS kullanır:

<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 gerektiği gibi görüntülenir, ancak compteur2 göstermez. İçerik 300x300'lik bir tuval üzerinde JavaScript kullanılarak çizilir.

Neden ekran farkı var?

O görünüyor widthve heightCSS özelliklerini sadece gösterilir hangi kutunun boyutunu belirlemek oysa koordinat sistemi var nitelikleri genişliği veya tuval yüksekliğini belirler.

Bu, http://www.whatwg.org/html#attr-canvas-width (JS gerekir) veya http://www.whatwg.org/c#attr-canvas-width adresinde açıklanmaktadır (muhtemelen bilgisayarınızı yiyecektir) :

canvasEleman, bit haritasının büyüklüğü kontrol etmek için iki özelliği vardır: widthve height. Bu öznitelikler belirtildiğinde, geçerli negatif olmayan tamsayılar olmalıdır . Negatif olmayan tamsayılar ayrıştırmak için kurallar onların sayısal değerleri elde etmek için kullanılmalıdır. Bir öznitelik eksikse veya değerini ayrıştırmak bir hata döndürürse, bunun yerine varsayılan değer kullanılmalıdır. width300 öznitelik varsayılan ve height150 öznitelik varsayılan.

Ayarlamak widthve heightihtiyacınız için, kullanabilirsiniz

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

İçin <canvas>elemanları, CSS kuralları widthve heightsayfaya çekilecek Tuval öğesi gerçek boyutunu ayarlayın. Öte yandan, tuval API'sinin kullanacağı koordinat sisteminin veya 'ızgaranın' HTML özellikleri widthve heightboyutunu ayarlar.

Örneğin, şunu düşünün ( 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>

Her ikisi de tuval öğesinin iç koordinatlarına göre üzerlerine çizildi. Ancak ikinci tuvalde, kırmızı dikdörtgen iki kat daha geniş olacaktır, çünkü bir bütün olarak tuval CSS kurallarına göre daha büyük bir alana uzanmaktadır.

Not: CSS için kurallar widthve / veya heightbelirtilmezse, tarayıcı, öğeyi boyutlandırmak için HTML niteliklerini kullanır, böylece bu değerlerin 1 birimi sayfada 1 piksele eşit olur. Bu nitelikler belirtilmemişse sonra da bir varsayılan olacaktır widtharasında 300bir heightbir 150.

CSS'nizdeki genişliği ve yüksekliği ayarlarsanız tuval gerilir. Tuvalin boyutunu dinamik olarak değiştirmek istiyorsanız, JavaScript'i aşağıdaki gibi kullanmanız gerekir:

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

Tarayıcı css genişliğini ve yüksekliğini kullanır, ancak tuval öğesi tuval genişliğine ve yüksekliğine göre ölçeklenir. Javascript'te, css genişliğini ve yüksekliğini okuyun ve tuval genişliğini ve yüksekliğini buna ayarlayın.

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

Shannimal düzeltme

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

CSS, tuval öğesinin genişliğini ve yüksekliğini ayarlar, böylece çizilmiş her şeyi eğri bırakarak koordinat alanını etkiler

İşte Vanilla JavaScript ile genişlik ve yüksekliği nasıl ayarlayacağım

canvas.width = numberForWidth

canvas.height = numberForHeight

Örneğin CSS medya sorgularını temel alan dinamik bir davranış istiyorsanız, tuval genişliği ve yükseklik niteliklerini kullanmayın. CSS kurallarını kullanın ve ardından tuval oluşturma bağlamını almadan önce width ve height özelliklerine atayın CSS width ve height stilleri:

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

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

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