html5 canvas元素各种圆形绘制

最新推荐文章于 2021-06-27 07:31:32 发布

JRJ1637

最新推荐文章于 2021-06-27 07:31:32 发布

阅读量1.8k

点赞数

分类专栏： html 文章标签： html5 canvas元素各种圆形绘制

本文链接：https://blog.youkuaiyun.com/JRJ1637/article/details/53681737

版权

html 专栏收录该内容

10 篇文章

订阅专栏

这篇博客主要介绍了如何使用HTML5的canvas元素进行圆形的绘制，包括空心圆、实心圆以及带有边框的实心圆。通过设置不同的属性如lineWidth、strokeStyle、fillStyle等，可以实现不同效果的圆形。示例代码详细展示了如何使用arc方法绘制不同类型的圆。

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           canvas{background: #b8edc9;}
       </style>
   </head>
   <body>
       <h5>Canvas</h5>
       <canvas id="mycanvas" width="1000" height="1000">
           您的浏览器不支持html5dcanvas元素
       </canvas>
   <script type="text/javascript">
       var canvas=document.getElementById('mycanvas');//定义变量获取画布dom
       var c=mycanvas.getContext('2d');//设置绘图环境2d
       c.lineWidth=4;//设置线宽
       c.strokeStyle="#A52A2A";//设置边颜色


        //绘制圆
         c.fillStyle="gold";
         c.arc(50,350,30,0,Math.PI*2)//Math.PI*2表示角度
         c.stroke();
        //绘制实心
         c.beginPath();
         c.arc(50,430,30,0,Math.PI*2)//
         c.fill()

        //绘制有边的实心圆
        c.beginPath();
        c.lineWidth=3;
        c.strokeStyle="darkblue";
        c.fillStyle="gold";
//      c.arc(50,260,30,0,Math.PI*2)
//      c.stroke();
//      c.beginPath();
//      c.arc(50,260,30,0,Math.PI*2)
//      c.fill()
        c.beginPath();
        c.arc(50,260,30,0,Math.PI*2)
        c.stroke();
        c.fill()