HTML5canvas画圆的实现

最新推荐文章于 2021-06-18 16:24:16 发布

Lurkers.

最新推荐文章于 2021-06-18 16:24:16 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/this_name_true/article/details/86099519

HTML5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用HTML5的Canvas API来实现画圆的功能。通过提供的代码示例，展示了如何设置画布、确定圆心坐标和半径，以及填充和描边颜色，帮助读者理解Canvas绘制圆形的基本步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

代码如下：

<!DOCTYPE html>
<htmls>
<head>
    <meta charset="UTF-8">
    <title>Text2画圆</title>
</head>
<style>
</style>
<body>
<div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
        1
    </canvas>
</div>

<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        canvas.width = 500;
        canvas.height = 500;
        var context = canvas.getContext("2d");
        context.beginPath();
        context.arc(100,70,50,0.5*Math.PI,1*Math.PI);
        context.strokeStyle = "green";
        context.fillStyle = "white";
        context.fill(); //确认填充
        context.lineWidth = 5
        context.stroke();

        context.beginPath();
        context.arc(100,70,50,1*Math.PI,1.5*Math.PI);
        context.strokeStyle = "#999";
        context.fillStyle = "white";
        context.fill(); //确认填充
        context.stroke();
        
        context.beginPath();
        context.arc(100,70,50,1.5*Math.PI,2*Math.PI);
        context.strokeStyle = "red";
        context.fillStyle = "white";
        context.fill(); //确认填充
        context.stroke();
        
        context.beginPath();
        context.arc(100,70,50,2*Math.PI,0.5*Math.PI);
        context.strokeStyle = "blue";
        context.fillStyle = "white";
        context.fill(); //确认填充
        context.stroke();

    }
</script>
</body>
</html>