2

自分のページにキャンバスがあります

<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 を下回っているように見えます

ここに例があります

なぜこれが起こったのですか?どうすればこの問題を解決できますか?

4

1 に答える 1

1

あなたのコードでheigthは、スペルが間違っています。末尾hとtを交換する必要があります: height.

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

「円が一部しか表示されない」問題については、完全な円を描きたい場合は、0 度から 360 度まで描きます。270 度は円のちょうど 4 分の 3 です。

    // *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/

于 2012-05-04T17:38:57.460 に答える