首页
学习
活动
专区
圈层
工具
发布

教你如何用css3的clip-path画扇形、空心扇形(透明背景哦)

最近不是在参加创意游戏的活动吗,就想用css能不能组合出一些好看的效果,比如空心的圆环,或者扇形之类的,于是乎就去网上搜教程,结果找遍了谷歌和百度都没能找到想要的结果,可能这个需求确实小,也可能是我搜索的姿势不对吧...先说说传统的做法是如何实现制作扇形的,我从网上得知的方法使用border-radius属性画两个半圆,然后通过旋转其中一个半圆的方式去达成想要的效果,就像下面这样 当扇形角度大于180度的时候,我们第二个半圆的颜色就要与第一个圆的颜色一样...这时候我们可以画一个圆,然后去裁剪我们想要的图形就可以了,就像下面这样子(后面会放集合代码块),我们先画一个圆,然后去裁剪左上角的一块区域(浅蓝色),然后裁剪区和背景区重叠的部分就会留下来(扇形) 至于怎么做空心的扇形呢

5.6K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    一行命令画4种风羽(短线、长线、空心三角形、实心三角形)

    问题 我们熟知的风羽有四种:短线代表风速2m/s,长线代表风速4m/s,空心三角代表风速20m/s,实心三角代表风速50m/s。...但matplotlib里面只有短线、长线、三角形三种,尽管可以通过设置flagcolor=none,barcolor=balck将三角形变为空心,但也只支持3个level,且无法同时出现空心三角形和实心三角形...这样的话,就可以结合matplotlib中原有的短线、长线、以及通过设置color实现的空心三角形构成4种风羽,从而满足需求了。...step3 正常使用quiver函数即可 注意,我提供的code里面已经默认分了4个level:短线代表风速2m/s,长线代表风速4m/s,空心三角代表风速20m/s,实心三角代表风速50m/s。...代码示例 示例1 绘制一个80m/s的风羽,要求短线代表风速2m/s,长线代表风速4m/s,空心三角代表风速20m/s,实心三角代表风速50m/s。这里与默认level相同,无需修改。

    1.5K10

    自定义View之带进度百分比ProgressBar

    这种有填充有圆环的自己感觉用户体验不是太好,不如图4 这种做法忽略掉圆心,做法也很简单,那就是在画圆时useCenter传入一个false, java..., *如果传入为true,则画圆时就会包括圆心,其实就相当于用的圆规,如果设置为true,则画百分比时圆规一脚固定在圆心 *另一脚沿着圆弧按百分比进行画弧  * @param...除了包不包含圆心之分,还有一个区分那就是图1和图3是空心无填充,图2和图4是实心有填充,这个是怎么设计的呢?...) 首先是画整个圆环(圆环颜色,画笔对象,圆环宽度) 按百分比进行画弧(圆弧颜色,最大值,当前值) 考虑是空心还是实心(style) 画出文本(文本颜色,文本大小,文本是否显示) 画时考虑坐标 仔细想想...//canvas.drawArc(rectF,0,360*currentProgress/maxProgress,false,paint); java

    1.1K20

    类图画法?这样记

    很多新手甚至老手有时候都无法徒手画类图,其中原因可能就是关系线太难记。下面是我总结的类图UML中的概念和Java中的映射,以及对应的关系线。 1、泛化对应的是继承。 2、实现对应的是接口。...依赖是一个非常模糊的概念,对应到Java中方法里传递一个类,那么就算是当前类依赖了该类。 4、关联有两种,组合和聚合。关联,也就是Association,具体包含两种关联形式,分别是组合和聚合。...这两个在Java类中的实现都是通过类中加个字段来表示关联。但具体的使用场景中,需要区分关联类之间的关系来确定具体是属于聚合还是组合。...关系线记忆 泛化(继承)是实线表示都有实现,然后空心三角。 实现(接口)是虚线表示无实现,只是接口,然后空心三角。 关联是菱形,实心的表示组合(强关联),空心的表示聚合(弱关联)。

    1.4K10

    Android 自定义View 画圆(奥运五环)

    首先思考一个问题,用什么来画?废话,当然是纸和笔啊!那程序里面怎么画画呢?怎么把画出来的图形显示在页面上呢?你会不会思考这些呢?...包含了字体的类型,粗细,还有倾斜、颜色等 setUnderlineText 设置下划线 setStyle 设置画笔样式 ,常用的有Paint.Style.FILL(实心)、Paint.Style.STROKE(空心...OK,相信你看这个表已经看得不耐烦,(PS:其实我写的也烦了,悄悄地说)迫不及待的想要实践了,下面来实践一下 首先创建一个项目,我取名为PaintDemo,创建好之后,新建一个CustomView.java...,可以把这一行代码复制四次,然后改变半径的大小,为了看到效果,还是画空心圆 然后运行一下,就可以看到 是不是觉得有点意思了。...平时像这种图案你会自己去画吗?还是找UI切图呢? 刚才我们只是改变了半径而已,下面试着改变横坐标和纵坐标。

    2K41

    如果你看不懂别人画的 UML 类图,看这一篇文章就够了

    目录 1、UML 定义 2、类图中每个类的构成 3、UML类图中箭头的含义 3.1、实线空心箭头  3.2、虚线空心三角箭头 3.3、 实线箭头 3.4、虚线箭头 3.5、尾部为空心菱形箭头 (也可没箭头...java中一个类的全局变量引用了另一个类,就表示关联了这个类,A类的属性引用了B类。 3.4、虚线箭头  含义: 依赖 是一种使用的关系,即一个类的实现需要另一个类的协助。...java中,方法参数需要传入另一个类的对象,就表示依赖这个类。...由上图我们可以看到,UML中聚合关系用带空心菱形和箭头的直线表示。 聚合关系强调是“整体”包含“部分”,但是“部分”可以脱离“整体”而单独存在。...这篇文章主要想帮助大家了解一下 UML 类图的结构,这样在后续的学习或工作中,遇到别人画的类图,起码能看懂是啥意思。我这里也是帮大家温故一下。

    7.3K20

    Canvas画图基础

    画矩形 Canvas画矩形还是比较方便的,可以用fillrect,clearrect,strokerect,rect几种方法,各自间有点区别,先上代码: // html 画的是实心还是空心,而clearRect就是清空一个矩形区域,上图就是通过clearRect和fillrect配合画出的那个比较粗的矩形,实际上完全可以使用...170, 120); ctx.strokeStyle = '#000'; ctx.arc(120, 120, 50, 0 ,Math.PI*2); ctx.stroke(); // 再画圆 会发现,两个园都变成了黑色...顺时针和逆时针的区别 counterclockwise是arc方法的最后一个参数,表示顺时针画还是逆时针画,看字面比较容易理解,但是实际用起来却有点不一样。...现就上面的内容简单做个总结: Canvas可以画各种东西,但除了矩形,其它的都是要依靠路径来画的。 画新的路径之前最好使用beginPath方法,这样不容易影响之前的路径。

    2.5K50

    一个浪漫又悲情的爱情故事——笛卡尔心形线

    我搜了搜,不得不佩服网友们,有 Java 实现的,有 C# 实现的,也有 canvas 实现的,还能用 ECharts 画 ,可以学习学习。 好的,开始正文!...因为心形线的水平方向 和 垂直方向 对应的方程表达式不同,而用相同的方程表达式画的心形线,把每个点的 x 坐标和 y 坐标交换下,又会改变方向,所以会有两个方程表达式。 ?...好了,开始画吧,看看这位朋友的做法 思路 根据方程表达式得到所有点的坐标,然后把每个点连接起来,然后填充,最后就行成一个心形了。...平面直角坐标系 画法 (空心心形) 上面的代码是画一个实心的心形,当然我们也可以画空心的,只需要做出一点点的修改就可以。...极坐标系 画法 (空心心形) 用极坐标系 画法,画空心心形,也是一样的需要改改 draw() 函数,把原来的 fill() 方法,改为 stroke() 方法,并且把 strokeStyle

    2.8K20

    用画小狗的方法来解释Java中的值传递

    在开始看我画小狗之前,咱们先来看道很简单的题目:  下面程序的输出是什么?...如果你答错了,没关系,我要开始画小狗了,画完你就明白了;如果你答对了,但不太明白其中的原因,那我画的小狗也肯定能帮到你。 myDog是什么 首先你要搞懂,代码里的变量myDog是什么?...如果你对Java的运行时数据区域足够了解,应该知道,这个引用是放在虚拟机栈上的。...Java的变量都不是对象 通过上面的讲解,你也知道了一个很重要的点:Java里面的变量,要么是基本数据类型,要么是指向对象实例的引用类型(狗绳),绝对不会是一个对象(狗)。...那么,在Java,要怎么实现“对外面的对象进行修改”类似的功能呢?

    1.4K20
    领券