canvas基本操作画圆

最新推荐文章于 2024-06-02 00:26:11 发布

yihuoZhou

最新推荐文章于 2024-06-02 00:26:11 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： dom编程文章标签： canvas

本文链接：https://blog.youkuaiyun.com/qq_21794603/article/details/72780838

dom编程专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在HTML5 canvas上创建一个圆形。在一个300x300的canvas元素中，圆心位于(150, 150)，半径100，边框颜色为#4d4e53，填充颜色为#6a83ff。" 99632681,8669717,使用JavaScript判断三角形类型,"['JavaScript', '编程', '算法', '几何']

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

用canvas画一个圆
在一个300*300的canvas（id为“myCanvas“）上，以坐标点（150, 150）为圆心，100为半径，画一个边框色为#4d4e53，填充色为#6a83ff的圆。

<!DOCTYPE html>
<html>
<head>
    <title>canvas画圆</title>
    <meta charset="utf-8" description="用canvas画一个圆
在一个300*300的canvas（id为“myCanvas“）上，以坐标点（150, 150）为圆心，100为半径，画一个边框色为#4d4e53，填充色为#6a83ff的圆">
</head>
<body>
    <canvas id="myCanvas" width="300px" height="300px"></canvas>
    <script type="text/javascript">
        var myCanvas=document.getElementById('myCanvas');
        var ctx=myCanvas.getContext('2d');
        ctx.clearRect(0,0,300,300);//清空画布
        ctx.beginPath();//开始路径
        ctx.arc(150,150,100,0,Math.PI*2,true);//参数依次为圆心坐标x,y，半径，开始结束角，绘制方向顺时针
        ctx.fillStyle='#6a83ff';//填充颜色
        ctx.strokeStyle='#4d4e53';//边框颜色
        ctx.fill();
        ctx.stroke();
        ctx.closePath();//关闭路径
    </script>
</body>
</html>