HTML5畫布 - 圓形渲染問題

我正在嘗試使用HTML5畫布，並且在繪製圓形/圓弧時出現了一些問題，當我製作圓形時，它看起來更像是扭曲的橢圓形。我不知道我做錯了什麼。HTML5畫布 - 圓形渲染問題

這是我的js，在代碼下面擺弄。

<script> 
$(document).ready(function drawOnCanvas() { 
$("a#draw").click(function(){ 
var canvas = document.getElementById("canvas_1"); 
    if (canvas.getContext) { 
     var canvas_context = canvas.getContext("2d"); 
     console.log("2D context supported"); 
     // Drawing circles 
     var start_degrees = 0; 
     var end_degrees = 360; 
     var start_angle = (Math.PI/180) * start_degrees; 

     var end_angle = (Math.PI/180) * end_degrees; 
     canvas_context.beginPath(); 
     canvas_context.arc(100,100,25,start_angle, end_angle, true); 
     canvas_context.strokeStyle="rgb(0,222,0)"; 
     canvas_context.fill(); 
    } 
    else{ 
    alert("Not Working"); 
    } 
}); 
}); 
</script>

小提琴：

http://jsfiddle.net/hLfHy/

來源

2014-02-14 Mark

的問題是畫布內大小不給予其所呈現的視口。

在初始化補充一點：

var canvas = document.getElementById('canvas_1'); 
canvas.height = canvas.clientHeight; 
canvas.width = canvas.clientWidth

Demonstration

來源

2014-02-14 14:40:17

非常感謝你。 – Mark

您應該設置畫布大小有正確的寬高比

例

<canvas id="canvas_1" width="500" height="500>

來源

2014-02-14 14:43:23 cardeol

您需要設置您的畫布寬度和高度，以便您正確計算。嘗試下面它似乎現在在你的小提琴工作http://jsfiddle.net/hLfHy/10/

canvas.height = $("#canvas_1").clientHeight; 
canvas.width = $("#canvas_1").clientWidth;

來源

2014-02-14 14:44:55

HTML5畫布 - 圓形渲染問題

回答

相關問題