Jak uniknąć HTML Canvas auto rozciąganie

Mam następujący fragment kodu HTML:Jak uniknąć HTML Canvas auto rozciąganie

<style type="text/css"> 
    #c{width:200px;height:500px} 
</style> 
<canvas id="c"></canvas> 
<script type="text/javascript"> 
    var i = new Image(); 
    i.onload = function() { 
     var ctx = document.getElementById('c').getContext('2d'); 
     ctx.drawImage(i, 0, 0); 
    } 
    i.width = i.height = 20; // actual size of square.png 
    i.src = 'square.png'; 
</script>

Kwestia jest taka, że rysowane obrazu jest automatycznie rozciągnięte (zmieniony) proporcjonalnie do wielkości płótna. Próbowałem używać wszystkich dostępnych parametrów (drawImage(i, 0, 0, 20, 20, 0, 0, 20, 20)) i to nie pomogło.

Co powoduje rozciąganie mojego rysunku i jak mogę temu zapobiec?

Dzięki,
Tom

Źródło

2010-05-23 Tom

Znalazłem swoją odpowiedź http://stackoverflow.com/questions/2588181/canvas-is-stretch-when-using-css-but-normal-with-old-width-and-height-propert – Tom

Promuj swój komentarz do realnego odpowiedz na dobre następnej osobie, która przyjdzie szukać, a ja dam ci ciasteczko (lub uprowadzenie, cokolwiek Mam na sobie). – msw

Musisz się width i height atrybuty elementu canvas. Określają one współrzędną obszaru roboczego. Wygląda na to, że domyślnie jest to płótno o proporcji 2: 1, które Twój CSS jest przekrzywiony do kwadratu.

Źródło

2010-05-23 14:14:49 Eric

Warto zauważyć, że szerokość i wysokość atrybuty płótnie są nie jak starej szkoły <img> szerokość i wysokość atrybutów. Nie zastępują CSS. Określają one liczbę pikseli, które powinien mieć bufor pikseli w samym płótnie, a jeśli nie zostanie zastosowany do niego rozmiar z css, css będzie implikować jego rozmiar z tego kształtu tego bufora pikseli. Ustawienie rozmiaru elementu w css nie ustawia rozmiaru bufora pikseli - zmienia jego rozmiar. Z perspektywy CSS, < płótno > to zupełnie to samo, co <img>.

Źródło

2010-10-27 23:57:53 Blixxy

Świetna odpowiedź, dzięki. –

Jeśli używasz JQuery, nie powinieneś ustawiać CSS (jak wyżej wspomniani komentatorzy). Trzeba ustawić atrybut tak:

$("canvas").attr('width', aWidth); 
$("canvas").attr('height', aHeight);

działa świetnie.

Źródło

2012-08-05 10:10:09 Angelo

OK, nieco prostszy (i lżejszy) niż JQuery jest ... JAVASCRIP sam oczywiście!

Jeśli trzeba zmienić dynamicznie swoje płótno wymiary, wystarczy użyć:

document.getElementById('yourcanvasid').setAttribute('width', aWidth); 
document.getElementById('yourcanvasid').setAttribute('height', aHeight);

Źródło

2013-02-05 14:45:24 jst

document.getElementById ('yourcanvasid'). Width = aWidth robi to również –

I łatwiej było po prostu umieścić pętlę czekając na limit czasu w moim pętli animacji, na przykład:

function animate() { 
    c.clearRect(0, 0, window.innerWidth, window.innerHeight); 
    ryuji.draw(); 
    ryuji.update(); 
    let now = Date.now(); 
    then = now + (1000/fps); 
    while (Date.now() < then) { 

    } 
    requestAnimationFrame(animate); 
}

Źródło

2017-06-07 17:37:28 prithwin

Jak uniknąć HTML Canvas auto rozciąganie

Odpowiedz

Powiązane problemy