欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

canvas 画绕圆心旋转的扇形

程序员文章站 2024-03-24 10:59:16
...

先看效果图(为了颜色对比明显,搭配的颜色比较丑,大家可根据项目修改颜色):

canvas 画绕圆心旋转的扇形

上代码:

(1)css部分:

.middleCircle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 13rem;
      height: 13rem;
      border-radius: 50%;
      border: 3px solid #098fb7;
      margin: 117px;
    }

(2)html 部分:

<div class="middleCircle"> 
        <canvas id="mycanvas" width="260" height="260">
            您的浏览器不支持html5dcanvas元素
        </canvas>
    </div>

(3)js 部分(需引入JQ,也可将JQ写法改成原生写法):

var canvas=$('#mycanvas');//定义变量获取画布dom
  var c=mycanvas.getContext('2d');//设置绘图环境2d
  c.lineWidth=4;//设置线宽
  c.strokeStyle="rgba(206, 118, 83, 0.8)";   //设置边颜色
  c.fillStyle="rgba(206, 118, 83, 0.8)";     //扇形
  c.moveTo(130,130);
  c.arc(130,130,130,Math.PI*5/6,Math.PI*1.5,false);
  c.moveTo(130,130);
  c.arc(130,130,130,Math.PI*7/6,Math.PI*1.5,false);
  c.fill()
  c.beginPath();
  c.lineWidth=3;
  c.strokeStyle="rgba(217, 242, 245, 0.5)";
  var waitTime = 1;
  var waitInterval = setInterval(() => {   // 让扇形转动
    waitTime++;
    $('#mycanvas').css("transform", "rotate("+ waitTime +"deg)");
  }, 100)

 

相关标签: canvas 扇形