c语言图形学画扇形代码,利用CSS绘制任意角度的扇形示例代码
前言
扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果
效果图
示例代码:
扇形绘制
} .sx1{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); /*这个clip属性用来绘制半圆,在clip的rect范围内的内容显示出来,使用clip属性,元素必须是absolute的 */ border-radius: 100px; background-color: #f00;
/*-webkit-animation: an1 2s infinite linear; */
} .sx2{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); border-radius: 100px; background-color: #f00;
/*-webkit-animation: an2 2s infinite linear;*/
}
/*绘制一个60度扇形*/ .shanxing1 .sx1{transform: rotate(-30deg);} .shanxing1 .sx2{transform: rotate(-150deg);}
/*绘制一个85度扇形*/ .shanxing2 .sx1{transform: rotate(-45deg);} .shanxing2 .sx2{transform: rotate(-140deg);}
/*绘制一个向右扇形,90度扇形*/ .shanxing3 .sx1{transform: rotate(45deg);} .shanxing3 .sx2{transform: rotate(-45deg);}
/*绘制一个颜色扇形 */ .shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;} .shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}
/*绘制一个不同颜色半圆夹角 */ .shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;} .shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;}
/绘制一个60度扇形/
/*绘制一个85度扇形*/
/*绘制一个向右扇形,90度扇形*/
/*绘制一个颜色扇形 */
/*绘制一个不同颜色半圆夹角 */
下面这个是结合css+html5+javascript的一个更复杂的圆环图形
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
circle
}
not suopport canvas
var text=document.getElementById("nihao");
text.innerHTML="woshiwuxinguo"; var i=0.9;//这里默认设置好评率为90%
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth=10;
ctx.strokeStyle="gray";
ctx.arc(100,75,50,0,2*Math.PI);
ctx.fillStyle="#FBFBFB";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.translate(100,75);
ctx.rotate(-90*Math.PI/180);
ctx.strokeStyle="#FFCFCF";
ctx.arc(0,0,50,0,2*Math.PI*i);
ctx.stroke();
c.addEventListener("mouseover", function(e) {
ctx.beginPath();
ctx.strokeStyle="gray";
ctx.arc(0,0,50,0,2*Math.PI);
ctx.stroke(); var finish=i; var step=0; var internal=setInterval(function(e) {
console.log("step:"+step); if(step
step=step+0.01;
ctx.beginPath();
ctx.strokeStyle="#FFCFCF";
ctx.arc(0,0,50,0,2*Math.PI*step);
ctx.stroke();
}else{
clearInterval(internal);
}
}, 0.5)
}, true)
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
c语言图形学画扇形代码,利用CSS绘制任意角度的扇形示例代码相关推荐
- 仿电台网站网页版html代码,DIV+CSS实现电台列表设计的示例代码
CSS Spite技术:也就是CSS精灵技术,实际上CSS的精灵就是图片里的一个个的图标元素,这些图标可以使按钮.标签以及logo等等.很多网站中都应用了该技术,可有效减少传输请求次数,所需要的图标汇 ...
- html自动滚动代码,html+css+javascript实现列表循环滚动示例代码
说明:设置时间定时,在规定的时间内替换前一个节点的内容 1.关键代码:javascript: 复制代码代码如下: var dome=document.getElementById("dome ...
- html扇形调节角度,CSS如何实现任意角度的扇形(代码示例)
本篇文章给大家带来的内容是关于CSS如何实现任意角度的扇形(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白 ...
- [css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法 先画一个圆,外加两个绝对定位的半圆 扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现 这只能切出180°以内的扇形 超过180°的 ...
- python换照片底色_Python 利用OpenCV给照片换底色的示例代码
OpenCV的全称是:Open Source Computer Vision Library.OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows和M ...
- 利用ffmpeg来进行视频解码的完整示例代码
(转)利用ffmpeg来进行视频解码的完整示例代码(H.264) Decode() { FILE * inpf; int nWrite; int i,p; int nalLen; unsign ...
- 搜索导航HTML,CSS 带搜索导航栏的示例代码
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏. 以下实例均是响应式的. 可以先看下效果图: 创建一个搜索栏 主页 关于 联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav ...
- html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...
- canvas画任意角度的扇形,弧形,及扇形弧形填纯色渐变色
前提: 接到一个需求,某个事项的完成率用环形表示,小于100%时,每隔25%为一种纯色填充,完成率100%的时候,整个环形为渐变色填充.开始是用的echarts,知道canvas是画图工具,但是之前没 ...
最新文章
- cacti被监控机上snmp的安装及报错解决
- Tomcat Servlet学习
- Silverlight学习之——我的看法
- c语言在单行文本上删除子串,一道比较简单的题——PTA基础编程题目集 7-29 删除字符串中的子串 C语言试解-Go语言中文社区...
- 小程序nginx做反向代理_NGINX作为节点或Angular应用程序的反向代理
- 如何进行用户访谈更容易获得全面而有效的信息
- 阿里系盒子英菲克i6八核 科学使用 笔记 (2015年12月26日成功)
- java读取txt存入数据库,Java 读取txt文件,读取结果保存到数据库
- MSU转Uniprot转Entrez ID
- linux 笔记本摄像头,Ubuntu 7.10 下屏蔽笔记本摄像头的方法
- 用户输入月份,判断这个月是哪个季节
- 响铃:社交型流量平台,为何线上平台都扎堆去线下造节
- 小朋友排队问题(树状数组)
- CRNN:文本序列识别
- 修改手机开机Logo界面(Redmi Note 7)
- 无法打开此计算机的组策略,无法运行gpedit.msc(组策略)的解决
- 社交网络:有意义的不仅是邓巴数
- 信号与系统时域分析(3)——时域经典法
- vite+element-plus项目基础搭建
- 低频超声检测c语言程序设计教程课后答案,c语言程序设计课后第九章答案
热门文章
- 【更新7】ARCH和GARCH模型
- 程序员毕业1-2年如何正确编写自己简历
- CSDN 如何修改用户名(CSDN ID)?
- Cannot open precompiled header file: 'Debug/****.pch': No such file or directory
- 打怪升级记录(2018-2019)
- 小程序自定义搜索框_将自定义搜索提供程序添加到Windows 7以及高级搜索技巧
- HTML的导航栏的写法
- 音频文件(.wav)解析读取
- eNSP:实现不同网段不同vlan主机之间的互访(配置三层交换)
- 用python获取指定路径下的所有目录路径和文件路径