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

这是example

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

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/

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

1 个答案: