Question

我正在浏览 Pro HTML5游戏第二版这本书，我在第一章就遇到了问题。 full circle应该在half-circle问题的内部，但是我只看到显示full circle的条子。请参见屏幕截图：

我尝试过调整x和y点，以及开始角度，但无济于事，我只是得到了相同的圆圈。我在这里做错了什么？

<script type="text/javascript">
        // This function will be called once the page loads completely
        function pageloaded(){
            // Get a handle to the canvas object
            var canvas = document.getElementById("testcanvas");

            // Get the 2d context for this canvas
            var context = canvas.getContext("2d");

            // Drawing arcs & circles
            // draw a semi-circle
            context.beginPath();
            // Draw an arc at (400, 50) with radius 40 from 0 to 180 degrees, anti-clockwise
            // PI radians = 180 degrees
            context.arc(100, 300, 40, 0, Math.PI, true);
            context.stroke();
            context.closePath();

            // Draw a full circle
            context.beginPath();
            // Draw an arc at (500, 50) with radius 30 from 0 to 360 degrees, anti-clockwise
            // 2 * PI radians = 360 Degrees
            context.arc(100, 300, 30, 2 * Math.PI, true);
            context.fill();
            context.closePath();

            // Draw a three-quarter arc
            context.beginPath();
            // Draw an arc at (400, 100) with radius 25 from 0 to 270 degrees, clockwise
            // (3 / 2 * PI radians = 270 degrees)
            context.arc(200, 300, 25, 0, 3 / 2 * Math.PI, false);
            context.stroke();
            context.closePath();

        };
    </script>

Answer 1

这似乎你错过了起始角度：

context.arc(100, 300, 30, 2 * Math.PI, true);

正确：

                          | that was missing
context.arc(100, 300, 30, 0, 2 * Math.PI, true);

使用JavaScript绘制一个圆圈，只获得一个条子

1 个答案: