html - 使用html5画布画一个圆圈但只显示它的一部分

Question

我的页面上有一个画布

<canvas id="oneCanvas"  width="250px" heigth="250px"></canvas>​

然后我想在上面画一个圆圈

function drawCircle(theCanvas){
            var context=theCanvas.getContext('2d');
            context.beginPath();
            context.strokeStyle="#000000";
            context.lineWidth=50;
            context.arc(125,125,70,(Math.PI/180)*0,(Math.PI/180)*270,false);
            context.stroke();
            context.closePath();
        }
        $(function(){
            var theCanvas=document.getElementById('oneCanvas');
            drawCircle(theCanvas);
        });​

这段代码有问题：

圆圈只显示一部分，画布的高度似乎小于 250px

这是示例

那么为什么会发生这种情况？我该如何解决这个问题？

Answer 1

在您的代码中，heigth拼写错误。尾随h和t必须交换：height.

<canvas id="oneCanvas" width="250" height="250"></canvas>​

至于“圆只显示一部分”的问题：如果要画一个完整的圆，从零度到360度画。270 度只是一个圆的四分之三。

    // *270 changed to *360
    context.arc(125, 125, 70, (Math.PI/180)*0, (Math.PI/180)*360, false);
    //                        ^^^^^^^^^^^^^^^ This is zero, by the way

  http://jsfiddle.net/JLNY3/3/