Làm thế nào để tránh HTML Canvas tự động kéo dài

Question

Tôi có mảnh HTML sau đây:

<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> 

Vấn đề là hình ảnh rút ra được tự động kéo dài (thay đổi kích cỡ) tương ứng với kích thước của canvas. Tôi đã thử sử dụng tất cả các tham số có sẵn (drawImage(i, 0, 0, 20, 20, 0, 0, 20, 20)) và điều đó không giúp ích gì.

Điều gì khiến bản vẽ của tôi căng ra và làm cách nào để ngăn chặn điều đó?

Cảm ơn,
Tom

Answer 1

Bạn cần width và height thuộc tính trong các yếu tố canvas. Chúng chỉ định không gian tọa độ cho canvas. Rõ ràng, nó mặc định là một canvas có tỷ lệ khung hình 2: 1, mà CSS của bạn bị lệch thành một hình vuông.

Answer 2

Cần lưu ý rằng thuộc tính Chiều rộng và Chiều cao của canvas là không phải như trường cũ <img> thuộc tính chiều rộng và chiều cao. Chúng không phải là một thay thế cho CSS. Chúng chỉ định có bao nhiêu pixel mà bộ đệm pixel trong canvas chính nó sẽ có, và nếu bạn không áp dụng kích thước cho nó với css, css sẽ ngụ ý nó có kích thước từ hình dạng của bộ đệm pixel đó. Thiết lập kích thước của phần tử trong css không đặt kích thước của bộ đệm pixel - nó thay đổi kích thước của nó. Từ phối cảnh CSS, <canvas> hoàn toàn giống với một số <img>.

Answer 3

Nếu bạn đang sử dụng JQuery, bạn không nên đặt CSS (làm người nhận xét ở trên được đề cập). Bạn cần đặt thuộc tính như vậy:

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

hoạt động tốt.

Answer 4

Ok, một chút đơn giản hơn (và nhẹ hơn) so với JQuery là .. JAVASCRIP ITSELF tất nhiên!

Nếu bạn cần thay đổi dynamicaly kích thước canvas của bạn, chỉ cần sử dụng:

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

Answer 5

tôi tìm thấy nó dễ dàng hơn để chỉ cần đặt một vòng lặp trong khi chờ đợi thời gian chờ trong vòng lặp hoạt hình của tôi, Ví dụ:

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); 
}