畫布項目不能正確渲染

Question

我已經定義了兩個函數來渲染一個圓和一個三角形。非常直截了當的東西。

function circle(offset, size){ 
    var color = $("#color option:selected").val(); 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    radius = size * 1; 

    context.beginPath(); 
    context.arc(offset, 2, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = color; 
    context.fill(); 
} 

function triangle(offset, size){ 
    var color = $("#color option:selected").val(); 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    var width = size * 6; 
    var height = size * 5; 
    var padding = 0; 

    // Draw a path 
    context.beginPath(); 
    context.moveTo(offset + width/2, padding); 
    context.lineTo(offset + width, height + padding); 
    context.lineTo(offset, height + padding); 
    context.closePath(); 

    // Fill the path 
    context.fillStyle = color; 
    context.fill(); 
} 

我已經添加了畫布到我的頁面：

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

出於某種原因，我可以看到圓和廣場無法正常渲染。請參閱附加屏幕截圖。

Answer 1

我幾乎可以保證，這是因爲你使用CSS的寬度和高度，而不是<canvas> HTML屬性設置畫布的寬度和高度。

您需要定義無論是在canvas標籤寬度/高度：<canvas width="500" height="500">

或代碼：

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

，而不是由CSS。如果你這樣做：

<canvas style="width: 500px; height: 500px;">

然後，你將有一個300x150的畫布（默認大小），這是調整/扭曲是500×500，這是幾乎可以肯定，你在說什麼。

（我寫了上面的寫意，所以可能有錯字，但你明白了）