對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

總結

以上是生活随笔為你收集整理的绘制扇形的多种方式，包括border-radius、clip裁剪显示、canvas原点变换等方式的详细理解及demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。