CSS를 사용하여 어떤 각도에서도 부채꼴 모양을 그리는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS를 사용하여 어떤 각도에서도 부채꼴 모양을 그리는 방법

Feb 22, 2017 am 11:54 AM

css

부채모양 제작 원리로 하단에 단색 원형이 있고, 내부에 같은 색상의 반원이 2개 있는데, 내부 반원이 일정 각도로 변하면서 부채꼴 효과를 낼 수 있습니다.

&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;扇形绘制&lt;/title&gt;
    &lt;style&gt;
        .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;*/
        }
        /*绘制一个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;}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

    扇形制作原理，底部一个纯色原形，里面2个相同颜色的半圆，可以是白色,内部半圆按一定角度变化，就可以产生出扇形效果
    &lt;p&gt;/*绘制一个60度扇形*/&lt;/p&gt;
&lt;div class=&quot;shanxing shanxing1&quot;&gt;
    &lt;div class=&quot;sx1&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;sx2&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;/*绘制一个85度扇形*/&lt;/p&gt;
&lt;div class=&quot;shanxing shanxing2&quot;&gt;
    &lt;div class=&quot;sx1&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;sx2&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;/*绘制一个向右扇形，90度扇形*/&lt;/p&gt;
&lt;div class=&quot;shanxing shanxing3&quot;&gt;
    &lt;div class=&quot;sx1&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;sx2&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;/*绘制一个颜色扇形 */&lt;/p&gt;
&lt;div class=&quot;shanxing shanxing4&quot;&gt;
    &lt;div class=&quot;sx1&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;sx2&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;/*绘制一个不同颜色半圆夹角 */&lt;/p&gt;
&lt;div class=&quot;shanxing shanxing5&quot;&gt;
    &lt;div class=&quot;sx1&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;sx2&quot;&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;/body&gt; 
&lt;/html&gt;

로그인 후 복사

다음은 CSS+html5+javascript를 결합한 좀 더 복잡한 링 그래픽

&lt;%@ page language=&quot;java&quot; import=&quot;java.util.*&quot; pageEncoding=&quot;utf-8&quot;%&gt;
&lt;%
String path = request.getContextPath();
String basePath = request.getScheme()+&quot;://&quot;+request.getServerName()+&quot;:&quot;+request.getServerPort()+path+&quot;/&quot;;
%&gt;

&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;base href=&quot;&lt;%=basePath%&gt;&quot;&gt;
    
    &lt;title&gt;circle&lt;/title&gt;
    
    &lt;style type=&quot;text/css&quot;&gt;
    #myCanvas{}
    #nihao{
      position: absolute;
      top:10px;
      z-index: 1;
    }
    &lt;/style&gt;
  &lt;/head&gt;
&lt;body style=&quot;background:#FBFBFB;&quot;&gt;

&lt;canvas id=&quot;myCanvas&quot; width=&quot;300&quot; height=&quot;150&quot; style=&quot;border:1px solid #d3d3d3;&quot;&gt;
not suopport canvas

&lt;/canvas&gt;
&lt;div id=&quot;nihao&quot;&gt;&lt;/div&gt;
&lt;script&gt;
var text=document.getElementById(&quot;nihao&quot;);
text.innerHTML=&quot;woshiwuxinguo&quot;;
var i=0.9;//这里默认设置好评率为90%

var c=document.getElementById(&quot;myCanvas&quot;);
var ctx=c.getContext(&quot;2d&quot;);
ctx.beginPath();
ctx.lineWidth=10;
ctx.strokeStyle=&quot;gray&quot;;
ctx.arc(100,75,50,0,2*Math.PI);
ctx.fillStyle=&quot;#FBFBFB&quot;;
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.translate(100,75);
ctx.rotate(-90*Math.PI/180);
ctx.strokeStyle=&quot;#FFCFCF&quot;;
ctx.arc(0,0,50,0,2*Math.PI*i);
ctx.stroke();
c.addEventListener(&quot;mouseover&quot;, function(e) {
ctx.beginPath();
ctx.strokeStyle=&quot;gray&quot;;
ctx.arc(0,0,50,0,2*Math.PI);
ctx.stroke();
var finish=i;
var step=0;
var internal=setInterval(function(e) {
console.log(&quot;step:&quot;+step);
    if(step&lt;finish){
    step=step+0.01;
    ctx.beginPath();
    ctx.strokeStyle=&quot;#FFCFCF&quot;;
    ctx.arc(0,0,50,0,2*Math.PI*step);
    ctx.stroke();
    }else{
    clearInterval(internal);
    }
}, 0.5)
}, true)

&lt;/script&gt; 

&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

어떤 각도에서든 부채꼴 모양을 그리는 방법에 대한 더 많은 CSS 관련 기사를 보려면 주목하세요. PHP 중국어 웹사이트로!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.