绘制空心环形

最新推荐文章于 2024-07-24 11:58:45 发布
最新推荐文章于 2024-07-24 11:58:45 发布
阅读量1.1k 收藏 26
点赞数 24
文章标签： javascript css3 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40591925/article/details/132564958
版权

1.通过几个div拼接绘制空心环形进度条。

通过 -webkit-mask: radial-gradient(transparent 150px, #fff 150px);绘制空心圆

  • html:
    <body>
  <div class="circle">
    <div class="circle-left"></div>
    <div class="circle-left-mask"></div>
    <div class="circle-right"></div>
    <div class="circle-right-mask"></div>
  </div>
</body>
  • css：
    .circle {
  -webkit-mask: radial-gradient(transparent 150px, #000 150px);
  width: 400px;
  height: 400px;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
}
.circle-left {
  width: 50%;
  height: 100%;
  background: rgb(234, 67, 15);
  position: absolute;
  left: 0;
  z-index: 1;
}
.circle-left-mask {
  width: 50%;
  height: 100%;
  background: #24B39B;
  transform-origin: 100% 50%;
  position: absolute;
  transition: transform 1s linear;
  left: 0;
  z-index: 2;
}
.circle-right {
  width: 50%;
  height: 100%;
  background: rgb(234, 67, 15);
  position: absolute;
  right: 0;
  z-index: 3;
}
.circle-right-mask {
  width: 50%;
  height: 100%;
  background: #24B39B;
  transition: transform 1s linear;
  transform-origin: 0% 50%;
  position: absolute;
  right: 0;
  z-index: 4;
}
  • js绘制度数方法
    function drawing(rotate){
var right = document.getElementsByClassName('circle-right-mask')[0]
var left = document.getElementsByClassName('circle-left-mask')[0]
rotate=rotate>360?360:rotate
if(rotate<=180){
  right.style.transform = `rotate(${rotate}deg)`
}else{
  right.style.transform = `rotate(180deg)`
  setTimeout(()=>{
      left.style.transform = `rotate(${rotate - 180}deg)`
      left.style.transition = `transform ${1/180*(rotate - 180)}s linear`
      right.style.opacity = 0;
    },999)
  }
}

2.利用clip-path绘制环形

通过 -webkit-mask: radial-gradient(transparent 150px, #fff 150px);绘制空心圆

  • html:
      <body>
    <div class="circle">
      <div class="circle-content"></div>
      <div class="circle-content-mask"></div>
    </div>
  </body>
  • css:
      .circle {
    -webkit-mask: radial-gradient(transparent 150px, #000 150px);
    width: 400px;
    height: 400px;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
  }
  .circle-content{
    width:100%;
    height: 100%;
    background: rgb(234, 67, 15);
    position: absolute;
    left: 0;
  }
  .circle-content-mask {
    width: 100%;
    height: 100%;
    background: #24B39B;
    left: 0;
    z-index:1;
    clip-path:polygon(50% 50%,50% 0%,50% 50%);
    -webkit-clip-path:polygon(50% 50%,50% 0%,50% 50%)
  }
  • 通过Math.tan计算出位置，并在90、180、270、360做特殊处理
      function drawing(rotate){
    var circle = document.getElementsByClassName('circle')[0]
    var mask = document.getElementsByClassName('circle-content-mask')[0]
    var width=circle.offsetWidth
    var r = width/2
    if(rotate<90){
      var rad = rotate * Math.PI/180;
      var x = r*Math.tan(rad)+r
      mask.style=`clip-path:polygon(50% 50%,50% 0%,${x}px 0,50% 50%);-webkit-clip-path:polygon(50% 50%,50% 0%,${x}px 0,50% 50%)`
    }else if(rotate==90){
      mask.style=`clip-path:polygon(50% 50%,50% 0%,100% 0,100% 50%,50% 50%);-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0,100% 50%,50% 50%)`
    }else if(rotate<180){
      var rad1 = (rotate-90) * Math.PI/180;
      var y = r*Math.tan(rad1)+r
      mask.style=`clip-path:polygon(50% 50%,50% 0%,100% 0,100% ${y}px,50% 50%);-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0,100% ${y}px,50% 50%)`
    }else if(rotate==180){
      mask.style=`clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,50% 100%,50% 50%);-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,50% 100%,50% 50%)`
    }else if(rotate<270){
      var rad2 = (rotate-180) * Math.PI/180;
      var x1 = r-r*Math.tan(rad2)
      mask.style=`clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,${x1}px 100%,50% 50%);-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,${x1}px 100%,50% 50%)`
    }else if(rotate==270){
      mask.style=`clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,0% 100%,0% 50%,50% 50%);-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,0% 100%,0% 50%,50% 50%)`
    }else if(rotate<360){
      var rad3 = (rotate-270) * Math.PI/180;
      var y2 = r-r*Math.tan(rad3)
      mask.style=`clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,0% 100%,0% ${y2}px,50% 50%);-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,0% 100%,0% ${y2}px,50% 50%)`
    }else{
      mask.style=`clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,0% 100%,0% 0%,50% 0%);-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,0% 100%,0% 0%,50% 0%)`
    }
    mask.style.transition = `all 1s linear`
  }
  • 说明：

在这里插入图片描述

-#### js计算三角函数

    var sin30 = Math.sin(30 * Math.PI / 180)
    console.log(sin30);  //0.49999999999999994

    var cos60 = Math.cos(60 * Math.PI / 180)
    console.log(cos60);  //0.5000000000000001

    var tan45 = Math.tan(45 * Math.PI / 180)
    console.log(tan45);  //0.9999999999999999

css实现扇形

  • 通过linear-gradient绘制一个左右颜色不一致的圆
  • 设置一个伪类半圆，颜色和圆的一种颜色一致
  • 通多动画实现
  • 伪类旋转好多度，执行两次，如果大于180度；执行第二个动画，改变颜色，同时旋转度数执行的二次
<style>
  main{
    width: 100%;
    padding: 60px 0;
  }
  .chart{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 29px;
	width:100%;
	
  }
  .chart > p{
    width: 199px;
  }
  .chart > div{
    width: 100px; 
    height: 100px;
    border-radius: 50%;
    background-color: #E8E2D6;
    background-image: linear-gradient(to right, transparent 50%, #b4a078 0);
  }
  .chart div::before{
    content: "";
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    background-color: inherit;
    transform-origin: 0 50%;
	/* 伪类旋转好多度，执行两次，如果大于180度；执行第二个动画，改变颜色，同时旋转度数执行的二次 */
    animation: pie-chart-spin 3s linear var(--count) forwards,
                pie-chart-bg 3s step-end forwards;
  }
  @keyframes pie-chart-spin {
    to { transform: rotate(180deg); }
  }
  @keyframes pie-chart-bg {
		to { background: var(--bgColor); }
	}

</style>
<body>
  <main>
  <!-- count:度数/360*2，bgColor：count大于1时是扇形的颜色#b4a078，小于1时是背景色#E8E2D6 -->
    <div class="chart" style='--count:1.6;--bgColor:#b4a078;---name:pie-chart-bg'>
      <div class="pie"></div>
    </div>
  </main>
</body>
寒墨茗殇
关注
  • 24
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用css伪类制作空心圆、半空心圆、双层空心圆
zhizunbaonb777的博客
06-23 2577
body { padding: 10%; color: #fff; } /*空心圆*/ .kxy { margin: 10px 0; width: 10px; height: 10px; background-color: #fff;/*background-color: transparent;*/ position: relative; border-radius: 50%; border: 5px solid red; } /*end 空心圆*/ ...
table里css画空心圆,css 空心圆
weixin_34098209的博客
08-03 1334
用css实现一个空心圆，并始终放置在浏览器窗口左下角div{position:fixed;bottom:0;left:0;width:100px;height:100px;border:2px solid #000;border-radius:100px;}如何让圆水平，垂直居中div{position:fixed;top:50%;left:50%;transform:translate(-50%...
css空心圆
qq_34631220的博客
08-12 1336
width: 15rpx; height:15rpx; background: #ffffff; border-radius: 50%; border: 1px solid #6c49eb;
vue 实现div在圆环上布局，实现环绕效果
最新发布
m0_68964998的博客
07-24 228
1.三个圆环，设置三个dom。
用css画一个空心圆环,使用纯CSS画一个圆环（代码示例）
weixin_33055757的博客
08-04 4883
本篇文章通过代码示例介绍一下使用纯CSS画圆环的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。画圆环思想很简单：首先画两个圆，设置不同的背景色；然后让两个圆的圆心重合即可。难度系数☆☆HTML解析：此处有父容器CSS.container {position: relative;top: 0;left: 0;width: 300px;height: 300px;backgro...
用css实现一个空心圆，并始终放置在浏览器窗口左下角
weixin_30437481的博客
12-16 283
用css实现一个空心圆，并始终放置在浏览器窗口左下角 div{ position:fixed; bottom:0; left:0; width:100px; height:100px; ...
css空心圆代码,透明空心或切圆圈
weixin_36339710的博客
08-04 3273
您可以使用两种不同的技术实现透明切割圆：1.SVG以下示例使用内联svg。第一个片段使用蒙版元素剪切透明圆圈，第二个空心圆圈使用路径元素。圆圈由2个弧命令组成：使用mask元素：body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}...
html 环形图圆角,canvas绘制圆角环形图
weixin_35895994的博客
06-25 506
前言之前一篇文章，写过关于canvas绘制百分比的环形图,以及进度条模糊的解决方案，今天项目中用到了圆角环形图，查了一下百度echart，发现并没有圆角环形图，highchart的圆角环形图和项目中的有些出入，highchart的展示地址请看：https://www.hcharts.cn/demo/highcharts/gauge-activity 因此，用canvas写了一个，在这里分享一下。...
HTML5canvas 绘制一个圆环形的进度表示实例
08-31
为了增加视觉效果，我们还需要在红色扇形内部绘制一个白色空心圆，这可以通过创建一个较小半径的圆实现。然后再画一条细线，使圆环看起来更立体，线的颜色设置为灰色。 最后，为了使效果更加完善，我们还可以添加更...
css3绘制环形_图解CSS3制作圆环形进度条的方法
weixin_35479284的博客
01-17 1482
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的方法首先，当有人说你能不能做一个圆形进度条效果出来时，如果是静态完整圆形进度条，那么就很简单了：.circleprogress{width: 160px;height: 160px;border:20px solid red;bor...
html音乐播放器 频谱,HTML5 Canvas 实现简易 绘制音乐环形频谱图
weixin_26741799的博客
06-20 955
0.启发在B站我们有很多的小伙伴们应该都看到过用AE做的可视化音乐播放器播放音乐的视频,看着特别酷炫带感有木有。B站截图B站截图B站截图所以今天我就用 Canvas 做个简单 环形频谱图。那么~ ヾ(ｏ･ω･)ﾉ 开始吧！1.首先绘制静态的效果静态效果绘制静态效果很简单,我们只要从一点出发根据一定角度绘制线条,然后画个圆从中点开始覆盖线条就行了var wrap = document.getElem...
css简单实现环形动画效果，无需js
11-11
简单css实现环形动画效果，无需js；本资源适用于移动端、pc端，兼容性各大浏览器
C#winform 自定义控件实现圆形进度条和环形进度条控件
12-11
**环形进度条**，与圆形进度条类似，但它是完全闭合的，形成一个完整的圆环，通常用更小的半径空心圆作为背景，进度填充在环形内部。环形进度条在可视化表示接近100%的进度时特别有用，因为它可以直观地展示即将完成...
table里css画空心圆,在SVG中绘制一个空心圆圈
weixin_29696799的博客
08-03 425
这里有一个程序来创建贝塞尔弧线尽可能接近都没有什么圆。你需要四条路径才能完成一个圆圈。BezierCurve BezierArc(double ox, double oy, double r, double thetaa, double thetab){double theta;double cpx[4];double cpy[4];int i;int sign = 1;while (thetaa...
html css画中空圆圈,实现CSS圆环的5种方法(小结)
weixin_31995467的博客
05-30 5408
想到去年面试实习的时候被问到实习圆环的问题，特意写篇文章总结一下吧！总结了一下大概有5种方法。1. 两个标签的嵌套：.element1{width: 200px;height: 200px;background-color: lightpink;border-radius: 50%;}.child1{width: 100px;height: 100px;border-radius: 50%;bac...
CSS空心圆
weixin_30729609的博客
12-14 2443
CSS代码：改变border的大小控制空心的大小 div { width: 100px; height: 100px; background: #ffffff; border-radius: 50%; border: 20px solid #ffc107; } 显示： 转载于:https://www.cnblogs.com/jshaxclcc/p...
使用CSS制作动态的环形图/饼图
Moon Star
03-05 1478
使用纯 css 实现一个环形图。
html5空心圆属性,科技常识：html5使用canvas画空心圆与实心圆
weixin_42358791的博客
06-04 466
今天小编跟大家讲解下有关html5使用canvas画空心圆与实心圆 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html5使用canvas画空心圆与实心圆 的相关资料，希望小伙伴们看了有所帮助。这里给大家分享的是一个学习canvas的时候做的画空心圆与实心圆的练习题 非常简单。复制代码代码如下: var canvas=document.getElementById("canvas")...
空心圆代码
abcyh999的博客
03-22 2127
空心圆代码如下： <!DOCTYPE html> <html> <head> <style> #{ padding: 0; margin: 0; } #one{ width: 300px; height: 300px; background:red; border-radius:...
glsl绘制空心矩形
04-04
在GLSL中绘制空心矩形，可以使用以下代码实现[^2]： ```glsl void main() { vec2 position = gl_FragCoord.xy; vec2 size = vec2(100.0, 50.0); // 矩形的宽度和高度 vec2 border = vec2(5.0, 5.0); // 矩形的边框宽度 // 计算矩形的边界 vec2 topLeft = vec2(0.0, 0.0); vec2 bottomRight = size; // 计算矩形的边框范围 vec2 borderStart = topLeft + border; vec2 borderEnd = bottomRight - border; // 判断像素是否在矩形内部或边框上 bool insideRectangle = all(greaterThanEqual(position, topLeft)) && all(lessThanEqual(position, bottomRight)); bool onBorder = all(greaterThanEqual(position, borderStart)) && all(lessThanEqual(position, borderEnd)); // 绘制空心矩形 if (insideRectangle && !onBorder) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); // 内部填充颜色为白色 } else { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); // 边框颜色为黑色 } } ``` 这段代码使用了GLSL的着色器语言，在片段着色器中进行矩形的绘制。首先，我们定义了矩形的大小和边框的宽度。然后，计算矩形的边界和边框范围。最后，根据像素的位置判断像素是否在矩形内部或边框上，并设置对应的颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值