無裁剪調整畫布的尺寸

Question

我一直遇到一個問題，我用canvas生成了一個圖像，但是當我在css中更改它時，尺寸不會改變。例如：可以說我在畫布中創建了一個200px x 200px的正方形圖像。然後在CSS中，我將尺寸設置爲100px x 100px。縮放圖像只顯示原始圖像的1/4。如何在不實際更改畫布本身的情況下調整畫布的大小？

Answer 1

預期結果。

您的矩形未被裁剪，正在調整大小。

• 甲200x200的帆布具有40000個像素
• 甲100x100的畫布擁有10000個像素

越小畫布爲1/4較大畫布的大小和RECT將是四分之一大小。

不知道您的設計要求，您可能想要做的是避免使用CSS來縮放您的畫布。正如你發現的那樣，用CSS改變寬度/高度會「拉伸/縮小」你的圖紙的大小。

改爲改變畫布元素的寬度/高度，而不是CSS寬度/高度。當您更改畫布元素的寬度/高度時，您已完成的任何圖形將被刪除（您必須重繪這些圖形）。但新的圖紙將「正確」大小。

當您要調整畫布（在JavaScript）：

var canvas = document.getElementById("myCanvas"); 
canvas.width=100; 
canvas.height=100; 

// changing the canvas width/height will automatically erase and drawings 
// so you must now redraw those drawings. 

如果你想擴展畫布，而無需重新繪製，你可以這樣做：

var img=new Image(); 
img.onload=function(){ 
    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    canvas.width=100; 
    canvas.height=100; 
    ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height); 
} 
img.src=canvas.toDataURL();