帆布從源代碼畫布複製後渲染不良

Question

我有兩個畫布和一個選擇按鈕。

選擇按鈕用於更改第二個畫布中的比例。

第一個畫布的內容被拷貝到第二個畫布中。

當我用選擇按鈕增加比例尺時，第二個畫布被調整大小和完美縮放，但他的渲染很糟糕（矩形和文本都模糊）。

什麼問題？

這裏的源代碼（你可以嘗試https://jsfiddle.net/0kqqnkmp/）：

<canvas id="canvas"></canvas> 
<canvas id="canvas_second"></canvas> 

<br>Choose your scale : <select onchange="change_scale(this);" autocomplete="off"> 
          <option>0.5</option> 
          <option selected>1</option> 
          <option>1.5</option> 
          <option>2</option> 
         </select> 


<script type="text/javascript"> 

//The canvas : 
c = document.getElementById("canvas"); 
c.style.border = "solid #000000 1px"; 

//The second canvas : 
c_second = document.getElementById("canvas_second"); 
c_second.style.border = "solid #000000 1px"; 

//Define the original width and height canvas : 
ORIGINAL_WIDTH_CANVAS = 300; 
ORIGINAL_HEIGHT_CANVAS = 300; 

c.width = ORIGINAL_WIDTH_CANVAS; 
c.height = ORIGINAL_HEIGHT_CANVAS; 

c_second.width = ORIGINAL_WIDTH_CANVAS; 
c_second.height = ORIGINAL_HEIGHT_CANVAS; 

//The canvas context : 
ctx = c.getContext("2d"); 
ctx_second = c_second.getContext("2d"); 

//Default scaling 
scale = 1; 

//Drawing function : 
function draw() 
{ 
    //Clear the drawing : 
    ctx.clearRect(0, 0, ORIGINAL_WIDTH_CANVAS, ORIGINAL_HEIGHT_CANVAS); 

    //Drawing a red rectangle : 
    ctx.fillStyle = "#000000"; 
    ctx.fillRect(5, 5, 50, 50); 

    //Drawing a text : 
    ctx.font = "normal bold 20px sans-serif"; 
    ctx.fillText("Hello world", ORIGINAL_WIDTH_CANVAS-220, ORIGINAL_HEIGHT_CANVAS-10); 


    //Clear the drawing on the second canvas : 
    ctx_second.clearRect(0, 0, ORIGINAL_WIDTH_CANVAS, ORIGINAL_HEIGHT_CANVAS); 

    //Copy drawing on the second canvas : 
    ctx_second.drawImage(c, 0, 0); 

} 

//Function for scaling the second canvas : 
function change_scale(this_select) 
{ 
    //Retrieve the scale value : 
    scale = parseFloat(this_select.value); 

    //Resize the second canvas : 
    c_second.width = ORIGINAL_WIDTH_CANVAS * scale; 
    c_second.height = ORIGINAL_HEIGHT_CANVAS * scale; 

    //Apply scaling on the second canvas : 
    ctx_second.scale(scale, scale); 
} 


//Draw : 
setInterval("draw()", 300); 

</script> 

Answer 1

你模糊的結果是，當你擴展的圖像可以預期的。

畫布實際上是一個位圖圖像。放大時，位圖圖像變得模糊。

所以當你縮放&在畫布＃2上繪製你的位圖畫布＃1時，你會得到一個模糊的結果。

修復方法是scale(2,2)畫布＃2，然後重新發出將您的矩形&文本拖到第一個畫布上的相同命令。

好的一點是，scale會自動處理重繪時改變你的[x，y]座標。因此，您使用的是與用於在畫布＃1中繪製的完全相同的[x，y]座標。

// scale the second canvas 
secondContext.scale(2,2); 

//Drawing a red rectangle : 
secondContext.fillStyle = "#000000"; 
secondContext.fillRect(5, 5, 50, 50); 

//Drawing a text : 
secondContext.font = "normal bold 20px sans-serif"; 
secondContext.fillText("Hello world", ORIGINAL_WIDTH_CANVAS-220, ORIGINAL_HEIGHT_CANVAS-10);