运用CSS绘图随意角度的扇形示例编码

日期:2020-09-30 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

序言

扇型制作基本原理,底部1个单色原型,里边2个同样色调的半圆,能够是白色,內部半圆按1定角度转变,便可以造成出扇形实际效果

实际效果图

示例编码:

<html>
<head>
    <meta charset="UTF⑻">
    <title>扇形绘图</title>
    <style> .shanxing{ position: relative; width: 200px; height: 200px; border-radius: 100px; background-color: yellow;
        } .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;*/
        }
        /*绘图1个60度扇形*/ .shanxing1 .sx1{transform: rotate(⑶0deg);} .shanxing1 .sx2{transform: rotate(⑴50deg);}

        /*绘图1个85度扇形*/ .shanxing2 .sx1{transform: rotate(⑷5deg);} .shanxing2 .sx2{transform: rotate(⑴40deg);}

        /*绘图1个向右扇形,90度扇形*/ .shanxing3 .sx1{transform: rotate(45deg);} .shanxing3 .sx2{transform: rotate(⑷5deg);}

        /*绘图1个色调扇形 */ .shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;} .shanxing4 .sx2{transform: rotate(⑷5deg);background-color: #fff;}

        /*绘图1个不一样色调半圆夹角 */ .shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;} .shanxing5 .sx2{transform: rotate(⑷5deg);background-color: #0f0;}
</style>
</head>
<body> 扇型制作基本原理,底部1个单色原型,里边2个同样色调的半圆,能够是白色,內部半圆按1定角度转变,便可以造成出扇形实际效果 <p>/绘图1个60度扇形/</p>

<div class="shanxing shanxing1">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<p>/*绘图1个85度扇形*/</p>
<div class="shanxing shanxing2">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<p>/*绘图1个向右扇形,90度扇形*/</p>
<div class="shanxing shanxing3">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<p>/*绘图1个色调扇形 */</p>
<div class="shanxing shanxing4">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>

<p>/*绘图1个不一样色调半圆夹角 */</p>
<div class="shanxing shanxing5">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>

</body> 
</html>

下面这个是融合css+html5+javascript的1个更繁杂的圆环图型

<%@ page language="java" import="java.util.*" pageEncoding="utf⑻"%>
<%
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>circle</title>

    <style type="text/css"> #myCanvas{} #nihao{ position: absolute; top:10px; z-index: 1;
    }
    </style>
  </head>
<body style="background:#FBFBFB;">

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> not suopport canvas </canvas>
<div id="nihao"></div>
<script>
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(⑼0*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<finish){
    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) </script> 

</body>
</html>

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值,假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。