HTML5 Canvas - 圆形渲染问题答案

【问题标题】：HTML5 Canvas - Circle Rendering IssuesHTML5 Canvas - 圆形渲染问题
【发布时间】：2014-03-13 23:32:47
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html canvas

【解决方案1】：

问题在于画布内部大小与渲染它的视口不一致。

在初始化中添加这个：

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

Demonstration

【讨论】：

非常感谢！

【解决方案2】：

您应该将画布大小设置为具有正确的纵横比

例子

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

【讨论】：

【解决方案3】：

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

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

【讨论】：