亚洲精品久久久久久第一页-人妻少妇精彩视品一区二区三区-91国产自拍免费视频-免费一级a在线播放视频正片-少妇天天日天天射天天爽-国产大屁股喷水视频在线观看-操美女骚穴抽插性爱视频-亚洲 欧美 中文字幕 丝袜-成人免费无码片在线观看

  1. 首頁 > 生活知識 > >

css實現(xiàn)半圓邊框講解 css畫半圓環(huán)圖

生活百科

最近在看自己的頭條權(quán)益的時候，看到這個信用分圖片，出于職業(yè)的好奇心，研究一下這個半環(huán)圖的畫法 。
實現(xiàn)這個半圓圖 ， 有兩種方案 。第一種方案，走css路線，首先畫一個整的圓環(huán)，通過兩塊擋板的旋轉(zhuǎn)展現(xiàn)出一部分的環(huán)形 。第二種方案，通過canvas畫圖實現(xiàn)半環(huán)圖 。我認(rèn)為還是第二種方案更好實現(xiàn) 。今天我就教大家如何使用canvas實現(xiàn)這個圖 。
首先創(chuàng)建一個html文件 。在<body></body>標(biāo)簽里創(chuàng)建一個canvas標(biāo)簽，定義一下畫布的大小 。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>score</title><style>#score{background: #333;border-radius: 5px;}</style></head><body><canvas id="score" width="300" height="300" data-score='100'><span>你的瀏覽器不支持canvas元素，換個瀏覽器試試吧</span></canvas></body></html>然后開始寫js，在canvas標(biāo)簽里畫圓弧 。
var c = document.getElementById('score');var ctx=c.getContext("2d");var value = http://www.wokk.cn/c.attributes['data-score'].value;const x0 = 150; // 圓心坐標(biāo)const y0 = 155;// 圓心坐標(biāo)const r1 = 130; // 外圓半徑const startAng = 145; // 起始角度const endAng = 35;// 根據(jù)半徑和角度判斷x軸坐標(biāo)function getPointX(r, ao) {return x0 + r * Math.cos(ao * Math.PI / 180)}// 根據(jù)半徑和角度判斷Y軸坐標(biāo)function getPointY(r, ao) {return y0 + r * Math.sin(ao * Math.PI / 180)}// 底層的圓弧 無色ctx.beginPath();ctx.arc(x0, y0, r1, (Math.PI / 180) * startAng, (Math.PI / 180) * endAng, false);ctx.strokeStyle = "#666";ctx.lineWidth = 10;ctx.lineCap = 'round'; // 線的末端設(shè)置ctx.stroke();在瀏覽器打開，出現(xiàn)的效果如下：

css實現(xiàn)半圓邊框講解 css畫半圓環(huán)圖

文章插圖
圓環(huán)已經(jīng)初見成效 。興奮，激動，哈哈 。這個圓弧是底層圓弧 ， 是不會變動的 。接下來畫第二層圓?。?可以隨著信用分變動的部分 。上js代碼
// 畫外層的圓弧 有色,可變動var blueAng=145+(250/100)*value; // 這里的value是可以根據(jù)信用分控制的ctx.beginPath();ctx.arc(x0, y0, r1, (Math.PI / 180) *startAng, (Math.PI / 180) * blueAng, false);var linearGradient = ctx.createLinearGradient(0,0,250,0);linearGradient.addColorStop(0,'#F6E259');linearGradient.addColorStop(1,'#F4ECB6');ctx.strokeStyle = linearGradient;ctx.lineWidth = 9;ctx.lineCap = 'round'; // 線的末端設(shè)置ctx.stroke();請看效果圖：
css實現(xiàn)半圓邊框講解 css畫半圓環(huán)圖

文章插圖
然后就是填充中間的文字，js代碼如下：
// canvas中間的文ctx.font = "normal 80px PingFangSC-Medium"; // 字體大?。?樣式ctx.fillStyle = "#E8DA77";; // 顏色ctx.textAlign = 'center'; // 位置ctx.textBaseline = 'middle';ctx.moveTo(150, 155); // 文字填充位置ctx.fillText(value, 150, 310/2-30);ctx.font = "normal 14px PingFangSC-Regular"; // 字體大小，樣式ctx.fillStyle = "#E8DA77"; // 顏色ctx.fillText("評估于06-01 16:18:03", 150, 180);效果露一下?。?
css實現(xiàn)半圓邊框講解 css畫半圓環(huán)圖

文章插圖
說了這么多，附上完整代碼，你可以直接粘貼復(fù)制看看效果 。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>score</title><style>#score{background: #333;border-radius: 5px;}</style></head><body><canvas id="score" width="300" height="300" data-score='96'><span>你的瀏覽器不支持canvas元素，換個瀏覽器試試吧</span></canvas></body></html><script>var c = document.getElementById('score');var ctx=c.getContext("2d");var value = http://www.wokk.cn/c.attributes['data-score'].value;const x0 = 150; // 圓心坐標(biāo)const y0 = 155;// 圓心坐標(biāo)const r1 = 130; // 外圓半徑const startAng = 145; // 起始角度const endAng = 35;// 根據(jù)半徑和角度判斷x軸坐標(biāo)function getPointX(r, ao) {return x0 + r * Math.cos(ao * Math.PI / 180)}// 根據(jù)半徑和角度判斷Y軸坐標(biāo)function getPointY(r, ao) {return y0 + r * Math.sin(ao * Math.PI / 180)}// 底層的圓弧 無色ctx.beginPath();ctx.arc(x0, y0, r1, (Math.PI / 180) * startAng, (Math.PI / 180) * endAng, false);ctx.strokeStyle = "#666";ctx.lineWidth = 10;ctx.lineCap = 'round'; // 線的末端設(shè)置ctx.stroke();// 畫外層的圓弧 有色,可變動var blueAng=145+(250/100)*value; // 這里的value是可以根據(jù)信用分控制的ctx.beginPath();ctx.arc(x0, y0, r1, (Math.PI / 180) *startAng, (Math.PI / 180) * blueAng, false);var linearGradient = ctx.createLinearGradient(0,0,250,0);linearGradient.addColorStop(0,'#F6E259');linearGradient.addColorStop(1,'#F4ECB6');ctx.strokeStyle = linearGradient;ctx.lineWidth = 9;ctx.lineCap = 'round'; // 線的末端設(shè)置ctx.stroke();// canvas中間的文字ctx.font = "normal 80px PingFangSC-Medium"; // 字體大小 ， 樣式ctx.fillStyle = "#E8DA77";; // 顏色ctx.textAlign = 'center'; // 位置ctx.textBaseline = 'middle';ctx.moveTo(150, 155); // 文字填充位置ctx.fillText(value, 150, 310/2-30);ctx.font = "normal 14px PingFangSC-Regular"; // 字體大?。?ctx.fillStyle = "#E8DA77"; // 顏色ctx.fillText("評估于06-01 16:18:03", 150, 180);// 下方0和100的位置ctx.fillText("0", 46, 250);ctx.fillText("100", 250, 250);</script>附：
ctx.arc(x0, y0, r1, (Math.PI / 180) * startAng, (Math.PI / 180) * endAng, false);【css實現(xiàn)半圓邊框講解 css畫半圓環(huán)圖】這個括號里有五個參數(shù)，分別是：圓心的x軸坐標(biāo)，圓心的y軸坐標(biāo)，圓環(huán)的起始點(diǎn)角度，圓環(huán)的終點(diǎn)角度，順時針與否（true或者false） 。


    以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請您及時就醫(yī)或請專業(yè)人士給予相關(guān)指導(dǎo)!

    「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：