绘制扇形的多种方式，包括border-radius、clip裁剪显示、canvas原点变换等方式的详细理解及demo

对clip的理解：

clip是对使用了该样式的元素进行裁剪显示。使用方法是rect (top, right, bottom, left) 其中参数top代表显示的区域上边界离该元素顶部border-top相对距离，依此分别是右边界离该元素左侧border-left相对距离。参数top和left取值auto时候代表是取值0，bottom和right取值auto时候代表取值100%；

注意：clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性时候时起作用。样式在所有浏览器都支持，在ie4-ie7兼容性写法是去掉参数之间的逗号，如rect (top  right  bottom  left)


clip的实践裁剪显示文本或图片demo

   <h3>使用clip的demo1文本裁剪显示</h3>
   <div style="height: 50px;">
      <p class="textClip">使用clip裁剪显示指定区域范围内的文字内容</p>
   </div>
   <h3>使用clip的demo2图片裁剪</h3>
   <p style="height: 100px;">
      <img class="imgClip" src="http://www.w3school.com.cn/i/eg_bookasp.gif" alt="w3school图片加载失败" title="你好" width="120" height="150">
   </p>

   .textClip {
      clip:rect(0px,130px,30px,20px);
      position: absolute;
      border:1px solid blue;
      padding:10px;
   }
   .imgClip {
      clip:rect(auto,80px,80px,20px);
      position: absolute;
   }

效果图


绘制圆形和半圆形

利用border-radius或clip样式绘制圆形或者半圆形demo3，如下

   <p >
      <h3>绘制圆形</h3>
      <div style="width:100px;height:100px;border-radius: 50px;background-color: red;"></div>
      <h3>绘制半圆形</h3>
      <div style="width:100px;height:50px;border-radius: 100px 100px 0px 0px ;background-color: red;"></div>
      <p>使用clip样式在圆形基础上遮盖显示绘制半圆形</p>
      <div style="height:60px;position: relative;">
         <div style="width:100px;height:100px;border-radius: 50px;background-color: red;position: absolute;clip: rect(0px,100px,50px,0px);"></div>
      </div>
   </p>

效果图


border-radius绘制圆形的原理是当border-radius大小是等宽高的大小的一半时候，每个边角都会形成一个90度的圆角，再将高变成原来的一半就绘制出了半圆，同理当单个边角的border-radius和等宽高的大小一致时，会形成一个更大的90度扇形（如下代码）；


绘制90度扇形

还可以宽高设置为0利用border-width绘制小三角形进而绘制扇形或者clip裁剪显示，如demo

   <p>
      <p>方法一：如左上角border-radius等于宽高，其他为0</p>
      <div style="width:50px;height:50px;background-color: red;border-radius: 50px 0 0;margin-bottom:10px;"></div>
      <p>方法二：宽高设置为0,设置border-width绘制小三角形,再使用border-radius实现扇形效果</p>
      <div style="width:0;height:0;border:red 50px solid;border-color:red transparent  transparent transparent;border-radius: 50px;"></div>
      <p>方法三：使用clip样式裁剪显示</p>
      <div style="width:100px;height:50px;border-radius: 100px 100px 0px 0px ;background-color: red;position: absolute;clip: rect(0px,50px,50px,0px)"></div>
      <div style="padding-left:100px;position: absolute;clip: rect(0px,150px,50px,0px)"><div style="width:100px;height:100px;border-radius: 50px;background-color: red;position: absolute;clip: rect(0px,100px,50px,0px);"></div></div>
   </p>

效果图


绘制任意角度扇形

原理是利用了clip样式多个半圆裁剪显示被覆盖的底图，或使用canvas绘制

   <p>
      <p>详细原理：底部一个纯色原形，里面2个相同颜色的半圆，可以是白色,内部半圆按一定角度变化，就可以产生出扇形效果</p>
      <div style="width:100px;height:100px;border-radius: 50px;background-color: yellow;display: inline-block">
         <div style="width:100px;height:100px;border-radius: 50px;background-color: red;position: absolute;clip: rect(0,50px,100px,0);transform: rotate(-60deg)"></div>
         <div style="width:100px;height:100px;border-radius: 50px;background-color: red;position: absolute;clip: rect(0,50px,100px,0);transform: rotate(60deg)"></div>
      </div>
      <div style="width:100px;height:100px;border-radius: 50px;background-color: red;display: inline-block;border:transparent;">
         <div style="width:101px;height:101px;border-radius: 51px;background-color: white;position: absolute;clip: rect(0,50px,100px,0);transform: rotate(-45deg)"></div>
         <div style="width:101px;height:101px;border-radius: 51px;background-color: white;position: absolute;clip: rect(0,50px,100px,0);transform: rotate(30deg)"></div>
      </div>
   </p>

效果图


使用canvas绘制任意角度扇形

   <canvas id="acanvas" width="500" height="500">
      您的浏览器不支持html5的canvas元素
  </canvas>


      var canvas=document.getElementById('acanvas');
      var p=canvas.getContext('2d');
      p.lineWidth=2;
      p.strokeStyle="red";
      p.fillStyle="red";

      //所有的变换都是基于原点的
      p.translate(100,100);  //设置原点，则旋转圆心等中心点是再100,100的位置，不设置原点会默认中心是0,0
      p.save();  //保存当前绘图stroke、fill样式、原点、旋转角度等
      p.arc(0,0,100,1/6*Math.PI,1/3*Math.PI); //水平x轴方向为0度，顺时针为正
      p.rotate(1/6*Math.PI); //坐标轴顺时针旋转30度
      p.moveTo(100,0);
      p.lineTo(0,0);
      p.restore();  //回到p.save()时候的绘图状态值
      p.save();
      p.rotate(1/3*Math.PI);
      // p.moveTo(0,0);  //这里如果添加一个线条起始点会导致fill()无法填充整个扇形
      p.lineTo(100,0);
      p.stroke();
      p.fill(); 
      p.restore();


对上述代码进行简化，直接将弧线的终点连接到原点都不用save和restore(),如下demo：

  <canvas id="bcanvas" width="500" height="500">
   您的浏览器不支持html5的canvas元素
   </canvas>


      var bcanvas=document.getElementById('bcanvas');
      var ctx=bcanvas.getContext('2d');
      ctx.translate(100,100);
      ctx.strokeStyle="red";
      ctx.arc(0,0,100,1/6*Math.PI,1/3*Math.PI);
      ctx.lineTo(0,0);
      ctx.rotate(1/6*Math.PI);  //旋转到起始角度大小
      ctx.lineTo(100,0);
      ctx.stroke();


对上述代码进行封装：

      CanvasRenderingContext2D.prototype.sector = function(x,y,r,sDeg,eDeg){
         this.save();
         this.translate(x,y);
         this.arc(0,0,r,sDeg*Math.PI/180,eDeg*Math.PI/180);
         this.lineTo(0,0);
         this.rotate(sDeg*Math.PI/180);
         this.lineTo(r,0);
         this.restore();
         return this;
      }
      ctx.sector(0,0,100,45,90).stroke();

进一步简化，能利用closePath()方法进一步封装

      //使用beginPath和closePath对上面的封装方法进行简化,closePath是封闭路径
      CanvasRenderingContext2D.prototype.sector2 = function(x,y,r,sDeg,eDeg){
         this.save();
         this.beginPath();
         this.moveTo(x,y);  //定义一个起点和一条弧线，再封闭路径
         this.arc(x,y,r,sDeg*Math.PI/180,eDeg*Math.PI/180);
         this.closePath();
         this.restore();
         return this;
      }
      //利用上述方法绘制饼图
      ctx.fillStyle="green";
      ctx.sector2(200,200,50,0,60).fill();
      ctx.fillStyle="purple";
      ctx.sector2(200,200,50,60,230).fill();
      ctx.fillStyle="lightblue";
      ctx.sector2(200,200,50,230,360).fill();

一个扇形倒计时的demo以及绘制双弧线扇形的demo，如下

      //一个扇形倒计时的demo
      var angle=270;
      var timer=null;
      setInterval(function(){func()},200);
      function func(){
         ctx.fillStyle="green";
         angle-=10;
         ctx.sector2(100,100,60,angle,270).fill();
         // ctx.fillStyle="#fff";  //添加该代码后会扇形变成进度条动画效果
         // ctx.sector2(100,100,40,0,360).fill();
         if(angle==-90){
            ctx.fillStyle="#fff";
            ctx.clearRect(0,0,500,500);
            angle=270;
            clearInterval(timer);  //clearInterval的参数比必须是定时器返回的id值
         }
      }


      //绘制双弧形的扇形
      var bbcanvas=document.getElementById('bbcanvas');
      var ctxb=bbcanvas.getContext('2d');
      ctxb.lineWidth=0;
      ctxb.translate(100,100);
      ctxb.save();
      ctxb.fillStyle="red";
      ctxb.beginPath();
      ctxb.moveTo(0,0);
      ctxb.arc(0,0,80,-120*Math.PI/180,-60*Math.PI/180);
      ctxb.fill();
      ctxb.closePath();
      ctxb.restore();
      ctxb.fillStyle="#fff";
      ctxb.beginPath();
      ctxb.moveTo(0,0);
      ctxb.arc(0,0,40,-120*Math.PI/180,-60*Math.PI/180);
      ctxb.fill();
      ctxb.closePath();


更多封装可以参考：https://www.cnblogs.com/jarson-7426/p/6231767.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/554092.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

QQ浏览器怎么设置为默认浏览器

QQ浏览器怎么设置为默认浏览器

怎么将qq浏览器安装成自己想要的默认浏览器呢&#xff0c;今天小编就教大家一个方法&#xff0c;通过简单的方式&#xff0c;将qq浏览器设置成默认浏览器&#xff0c;这样用户在操作的时候就会更加的方便&#xff0c;打开浏览器就可以使用qq浏览器的功能&#xff0c;那么到底要…
阅读更多...
在VUE项目中使用SCSS ，对SCSS的理解和使用（简单明了）

在VUE项目中使用SCSS ，对SCSS的理解和使用（简单明了）

首先要了解什么是CSS 预处理器&#xff1f; SCSS是一种CSS预处理语言定义了一种新的专门的编程语言&#xff0c;编译后形成正常的css文件&#xff0c;为css增加一些编程特性&#xff0c;无需考虑浏览器的兼容性&#xff08;完全兼容css3&#xff09;&#xff0c;让css更加简洁、…
阅读更多...
如何解决360浏览器卡死的问题

如何解决360浏览器卡死的问题

我们在上网的时候&#xff0c;不可缺少的就是浏览器了&#xff0c;有一大部分人还是喜欢用360浏览器的。刚开始用360浏览器的时候感觉很不错&#xff0c;都都不知什么情况&#xff0c;老是无故崩溃&#xff0c;或者时常卡死&#xff0c;上网慢&#xff0c;播放视频插件响应失败…
阅读更多...
前端windows下常用的CMD 命令归纳

前端windows下常用的CMD 命令归纳

前言&#xff1a;在vue项目开发或安装部署卸载时候经常会用到CMD命令操作&#xff0c;所以这里将常用到的cmd命令进行归纳。在运行框或cmd界面输入以下代码&#xff0c;回车键确定跳转对应的功能或界面shutdown 关机&#xff1b;mspaint 打开画图工具&a…
阅读更多...
360浏览器图片放大镜如何关闭

360浏览器图片放大镜如何关闭

360浏览器图片放大镜怎么关闭?360浏览器是一款功能强大的浏览器&#xff0c;在使用浏览器的时候&#xff0c;鼠标移动到图片那里&#xff0c;就会自动放大。有时候会很不方便&#xff0c;要怎么关闭呢&#xff0c;下面就给大家分享具体步骤。 打开工具&#xff0c;选择设置&a…
阅读更多...
VUE中父子组件传参（简单明了）

VUE中父子组件传参（简单明了）

父组件向子组件传递参数 child.vue如下 <template><div class"childClass"><h3>子组件内容</h3><p :class"num6?redclass:blueclass">当父组件内容传递给子组件时&#xff0c;该行变成红色</p><p>父组件向子…
阅读更多...
360安全浏览器极速模式怎么设置

360安全浏览器极速模式怎么设置

360安全浏览器极速模式怎么设置 在window操作系统电脑中最常做的事情就是浏览网页查找资料了&#xff0c;这就需要用到浏览器&#xff0c;而浏览器的种类五花八门。其中360浏览器使用率比高&#xff0c;其中有一个极速模式&#xff0c;可以快速浏览文章内容。如何设置360浏览器…
阅读更多...
行内元素和块级元素的区别，为何img、input等行内元素可以设置宽高??（夯实基础）

行内元素和块级元素的区别，为何img、input等行内元素可以设置宽高??（夯实基础）

我们习惯将html中元素分类为行内元素和块级元素&#xff0c;如下&#xff1a;常见块级元素有&#xff1a;html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等&#xff1b;常见行内元素有&…
阅读更多...
360浏览器是ie浏览器吗?有什么区别

360浏览器是ie浏览器吗?有什么区别

核心提示&#xff1a;360浏览器是360公司开发的产品&#xff0c;它是基于IE浏览内核开发的。 360浏览器是ie浏览器吗?有什么区别 360浏览器不是ie浏览器。 360浏览器是360公司开发的产品&#xff0c;它是基于IE浏览内核开发的。 360浏览器与ie浏览器的区别 360安全浏览器…
阅读更多...
VUE中 ref $refs 使用详解，扩展到$parent 、$children 的使用

VUE中 ref $refs 使用详解，扩展到$parent 、$children 的使用

$refs 的使用方法就是在元素或组件标签上添加ref属性指定一个引用信息&#xff0c;引用信息将会注册在父组件的$refs对象上&#xff0c;在js中使用$refs来指向DOM元素或组件实例&#xff1b; 应用一&#xff1a;在DOM元素上使用$refs可以迅速进行dom定位&#xff0c;类似于$(&q…
阅读更多...
设置搜狗浏览器为默认浏览器时被360拦截怎么办？

设置搜狗浏览器为默认浏览器时被360拦截怎么办？

我们在上网时都习惯使用某一种浏览器&#xff0c;也希望打开网页时可以使用默认浏览器来打开&#xff0c;但在设置默认浏览器时可能会遇到一些问题&#xff0c;下面小编就来介绍一下解决方法。有很多用户喜欢使用搜狗浏览器为默认浏览器&#xff0c;但是用户在使用设置的时候会…
阅读更多...
CSS文字或元素的水平垂直居中多种方式（简单明了）

CSS文字或元素的水平垂直居中多种方式（简单明了）

前言&#xff1a;水平居中&#xff0c;我们可以很容易想到使用text-align实现文字水平居中&#xff0c;使用margin:0px auto;可以实现元素水平居中&#xff1b;所以重点将是怎么实现文字和元素的垂直居中&#xff1f;&#xff1f; --- 本文将通过举栗子说明各种解决方式&#x…
阅读更多...
腾讯视频怎么设置下载视频位置

腾讯视频怎么设置下载视频位置

腾讯视频是当下人们普遍使用的影视娱乐工具&#xff0c;腾讯视频怎么设置下载视频位置呢&#xff0c;下面我为大家一一介绍 1、打开电脑 2、打开腾讯视频 3、点击右上角菜单 4、点击设置 5、如下图选择 6、点击应用 7、腾讯视频设置开机自动启动就成功了&#xff0c;赶紧…
阅读更多...
Vue-cli 项目打包布署（简单清晰）

Vue-cli 项目打包布署（简单清晰）

第一步&#xff1a;项目打包前更改项目config配置 打开项目的 config>index.js文件修改build对象的assetsPublicPath: 属性值为 ./ 如下 第二步&#xff1a;对vue-cli项目进行打包 在运行窗口输入cmd后打开命令窗口&#xff0c;在项目文件下输入npm run build命令 如下&…
阅读更多...
PP视频怎么把输出声音设置成单声道输出

PP视频怎么把输出声音设置成单声道输出

在使用PP视频看电影时&#xff0c;怎么把输出声音设置成单声道输出呢?下面小编就介绍下方法。 1、先安装PP视频安装&#xff0c;然后点击快捷键启动。 2、进入到主页后点击右上角的三角形图标。 3、我们点击窗口中的“设置”按钮。 4、点击新页面左侧的“高级”按钮。 5、…
阅读更多...
Vue-cli项目中路由的基础用法，以及路由嵌套

Vue-cli项目中路由的基础用法，以及路由嵌套

文件目录&#xff1a; 编辑router文件夹下的index.js文件 第一步&#xff1a;引用vue和vue-router &#xff0c;Vue.use&#xff08;VueRouter&#xff09; /* eslint-disable*/ import Vue from vue import Router from vue-router Vue.use(Router) 第二步&#xff1a;引用…
阅读更多...
电脑端腾讯视频如何设置离线下载完成后自动关机

电脑端腾讯视频如何设置离线下载完成后自动关机

小编今天更新“电脑端腾讯视频如何设置离线下载完成后自动关机”&#xff0c;1、点击主页面右上角的三条横杠 2、点击【设置】 3、点击左侧的【自动关机】 4、勾选【离线下载完成自动关机】 5、点击【应用】即可 腾讯视频最新电视剧推荐&#xff1a; 纪录片《诺斯伍兹&am…
阅读更多...
Vue路由传参的几种方式

Vue路由传参的几种方式

前言&#xff1a;顾名思义&#xff0c;vue路由传参是指嵌套路由时父路由向子路由传递参数&#xff0c;否则操作无效。传参方式可以划分为params传参和query传参&#xff0c;params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。 参考官网&#x…
阅读更多...
腾讯视频如何缓存视频

腾讯视频如何缓存视频

本文小编给大家分享的是腾讯视频下载安装免费2020_腾讯视频如何缓存视频。腾讯视频看到喜欢的视频&#xff0c;想把视频缓存下来&#xff0c;那腾讯视频如何缓存视频呢? 具体该如何操作&#xff0c;下面小编来详细的讲解一下。 1、首先打开腾讯视频&#xff0c; 2、接着选择…
阅读更多...
常用html字符的转义字符串（html代码），全部转义字符备用

常用html字符的转义字符串（html代码），全部转义字符备用

转义字符串&#xff0c;即字符实体&#xff08;Character Entity&#xff09;分成三部分&#xff1a; 第一部分是一个&符号&#xff1b; 第二部分是实体&#xff08;Entity&#xff09;名字或者是#加上实体&#xff08;Entity&#xff09;编号&#xff1b; 第三部分是一个分…
阅读更多...
最新文章

Copyright @ 2022~2023