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画布 - 圆形渲染问题

回答

相关问题