0

我有以下 HTML 文件：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Canvas Hello World</title>
    <link href="default.css" rel="stylesheet" />
    <script src="jquery-2.0.0.min.js"></script>
</head>
<body>
    <h1>ArcTo</h1>
    <h2>Two arcs</h2>
    <canvas id="arcToNormalCanvas" width="500" height="500">HTML5 not supported
    </canvas>
    <hr />

    <h1>Simple drawing:</h1>
    <canvas id="rectangleCanvas" width="500" height="500">HTML5 not supported
    </canvas>
    <hr />

    <script>
        $(document).ready(function () {
            doRectangleCanvas();
            drawTwoArcs();
        });

        function doRectangleCanvas() {
            var canvas = $('#rectangleCanvas')[0],
                ctx = canvas.getContext('2d');

            ctx.fillRect(50, 100, 150, 200);
            ctx.stroke();
        }

        function drawTwoArcs() {
            var canvas = $('#arcToNormalCanvas')[0],
                ctx = canvas.getContext('2d');
            ctx.strokeStyle = 'blue';
            ctx.lineWidth = 5;
            ctx.beginPath();
            ctx.moveTo(100, 100);
            ctx.lineTo(200, 200);
            ctx.moveTo(300, 200);
            ctx.lineTo(400, 100);
            ctx.stroke();

            ctx.beginPath();
            ctx.strokeStyle = 'green';
            ctx.moveTo(200, 200);
            ctx.arcTo(200, 200, 300, 200, 100);
            ctx.stroke();
        }
    </script>
</body>
</html>

但是，输出只有线条，没有弧线！

上面 html 文件的画布

有任何想法吗？

4

2 回答 2

2

arcTo仅 Firefox 和 Safari 支持。要获得完整的浏览器支持，您应该使用arc：

ctx.beginPath();
ctx.arc(250,200,50,Math.PI,Math.PI*2,true);
ctx.strokeStyle = "green";
ctx.stroke();

另外，我不得不问，你到底为什么在$('#rectangleCanvas')[0]你应该使用的时候使用document.getElementById('rectangleCanvas')？

于 2013-05-21T00:50:31.437 回答
0

如果你想连接两条线，这就是我认为你想要的，我必须改变这条线......

//...
ctx.moveTo(200, 200);
ctx.arcTo(250, 250, 300, 200, 50);
// A radius of 100 is not what you want I believe.
// I used 50 for this example.
// You might want Math.cos(Math.Pi / 4) * 100, which is around 70.7

// You might also want to add here a line to actually connect with (300, 200). As if you use a too short or too long radius your arc will not be connected.
ctx.lineTo(300, 200);
ctx.stroke();

...因为此函数将定义两条切线之间的弧线，而不是从点到点。

顺便说一句，所有支持 canvas 元素的主要浏览器都很好地支持 arcTo 函数。

于 2015-11-29T14:35:32.790 回答