CSS之如何繪製任意角度的扇形

-Advertisement-

下麵這個是結合css+html5+javascript的一個更複雜的圓環圖形原文鏈接：HTML5 CSS3如何繪製任意角度的扇形 ...

扇形製作原理，底部一個純色原形，裡面2個相同顏色的半圓，可以是白色,內部半圓按一定角度變化，就可以產生出扇形效果

<html>
<head>
    <meta charset="UTF-8">
    <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;*/
        }
        /*繪製一個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;}
</style>
</head>

<body>

    扇形製作原理，底部一個純色原形，裡面2個相同顏色的半圓，可以是白色,內部半圓按一定角度變化，就可以產生出扇形效果
    <p>/*繪製一個60度扇形*/</p>
<div class="shanxing shanxing1">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<p>/*繪製一個85度扇形*/</p>
<div class="shanxing shanxing2">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<p>/*繪製一個向右扇形，90度扇形*/</p>
<div class="shanxing shanxing3">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<p>/*繪製一個顏色扇形 */</p>
<div class="shanxing shanxing4">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>

<p>/*繪製一個不同顏色半圓夾角 */</p>
<div class="shanxing shanxing5">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>


</body> 
</html>

下麵這個是結合css+html5+javascript的一個更複雜的圓環圖形

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
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(-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<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>

原文鏈接：HTML5 CSS3如何繪製任意角度的扇形

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

觀察者模式（12）

今天我們來講一下觀察者模式。還是老樣子，給大家一個案例。一、案例在我們懷念的學生時代，我們會有這麼一個現象，當在教室里上自習的時候，讓一個同學把風，我們在教室里玩，當老師來的時候，讓那個同學給我們說一聲。好，下麵我們就用簡單的控制台應用程式來實現上述的場景（一個把風的同學，兩個玩耍的同學）客 ...
微信小程式教程（第三篇）

小程式的架構及實現機制，通道服務及會話管理小程式架構及實現機制小程式並不是 H5 應用，而是更偏向於傳統的 CS 架構，它是基於數據驅動的模式，一切皆組件（視圖組件）。所以建議在開發小程式時不要以web app的開發思維去思考。小程式開發語言是獨立的一整套開發語言體系，既與Html+CSS+Ja ...
自製圖片放大鏡

註釋： small img size：600x400 big img size：1200x800 原理：問題：居中理解太差： absolute ,left ,top,right,bottom,margin 放大縮小問題：起初： transform： scale() 縮放利用 transiti ...
JS的animate-queue和step-animate

Step-animate: 分為3部分：{配置},{step:function(){...},duration:1000} 通過 queue刪除動畫隊列，用 dequeue繼續動畫 ...
圖片上傳之FileAPI與NodeJs

HTML5之fileAPI HTML5之fileAPI使得我們處理圖片上傳更加簡單。實例 html代碼效果: 這裡我們可以通過來獲取到圖片的信息。這裡有 ,`size type`這幾個我們常用的屬性。實現預覽選擇好圖片後，我們都希望會有個預覽功能。這個html5也為我們想到了。他提供了 ...
進階之初探nodeJS

在"初探nodeJS"隨筆中，我們對於node有了一個大致地瞭解，併在最後也通過一個示例，瞭解瞭如何快速地開啟一個簡單的伺服器。今兒，再次看了該篇隨筆，發現該隨筆理論知識稍多，適合初級入門node，固萌生一個想法--想在該篇隨筆中，通過一步步編寫一個稍大一點的node示例，讓我們在整體上更加全面地了... ...
jQuery 滑動選項卡jQuery tabulous.js

A jQuery tabs module for todays web! 實例DEMO 運行一下 Documentation Tabulous.js can be used with any contents you choose in the tabs and it couldn't be mor ...
前端工程師所具備的技能以及順序

html css css3 javascript html5 jQuery jQuery UI jQuery EasyUI Exits Highcarts Chart Two Jsp Asp.net PHP Python MySql SQL Server Oracle MongDB XML JONG ...