2018/2/24 canvas知识四_disablenetwork is set. tor will not make or accept-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_38589469/article/details/79365408

本文介绍如何使用HTML5 Canvas API中的arc()方法绘制完整的圆或部分圆。文章详细解释了arc()方法的参数，包括圆心坐标、半径、起始角度及结束角度，并提供了示例代码。

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

绘制圆形（arc)

概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。

语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
arc: 弧（度）弧形物；天穹 英 [ɑːk] 美 [ɑrk]
counter 反击，还击；反向移动，对着干；反驳，回答 ['kaʊntə] 美 ['kaʊntɚ]
 解释：
   x,y：圆心坐标。
   r：半径大小。
   sAngle:绘制开始的角度。 圆心到最右边点是0度，顺时针方向弧度增大。
   eAngel:结束的角度，注意是弧度。π
   counterclockwise：是否是逆时针。true是逆时针，false：顺时针
   弧度和角度的转换公式： rad = deg*Math.PI/180;
   在Math提供的方法中sin、cos等都使用的弧度

代码：

<script>
   (function(){
      var canvas = document.querySelector('#cavsElem');
      var ctx = canvas.getContext('2d');
      var i = 0;
      canvas.width = 900;
      canvas.height = 600;
      canvas.style.border = "1px solid #000";

      ctx.beginPath();
      ctx.moveTo(200,200);

      ctx.arc(200, 200, 100, 0, .5*Math.PI);
      ctx.fill();
      
      //动态绘制圆形
      
      // setInterval(function(){
      //     ctx.arc(200, 200, 100, 0, i*2*Math.PI);
      //     if(i >=1 ){
      //        ctx.clearRect(0,0,900,600);
      //        ctx.beginPath();
      //        ctx.moveTo(200, 200);
      //        i = i -1;
      //     }
      //     i += .1;
      //     ctx.closePath();
      //     // ctx.stroke();
      //     ctx.fill();
      // }, 200);
      
   }());
</script>

效果展示：