Question

我正在尝试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/

Answer 1

问题是画布内部大小不符合渲染它的视口。

在初始化中添加：

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

Demonstration

Answer 2

您需要设置画布宽度和高度，以便正确计算。尝试以下似乎现在正在你的小提琴http://jsfiddle.net/hLfHy/10/

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

HTML5 Canvas - 圆形渲染问题

2 个答案: