婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > 利用 Canvas實現繪畫一個未閉合的帶進度條的圓環

利用 Canvas實現繪畫一個未閉合的帶進度條的圓環

熱門標簽:高德地圖標注商戶怎么標 黃石ai電銷機器人呼叫中心 ok電銷機器人 智能電銷機器人被禁用了么 惡搞電話機器人 電話機器人技術 地圖標注軟件打印出來 欣鼎電銷機器人 效果 如何查看地圖標注
最終效果圖

一、定義變量

定義半徑,定義圓環厚度,定義圓心位置、定義默認填充顏色

let radius = 75
let thickness= 10
let innerRadius = radius - thickness
let x = 75
let y = 75
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#f2d7d7";

二、畫第一個圓弧

ctx.beginPath();
ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)

注意 beginPath() 這個方法,生成路徑的第一步。本質上,路徑是由很多子路徑構成,這些子路徑都是在一個列表中,所有的子路徑(線、弧形、等等)構成圖形。而每次這個方法調用之后,列表清空重置,然后我們就可以重新繪制新的圖形。
 

也就是說,這個方法可以用來給 Canvas圖像 分組,繪制新的圖形如果不調用此方法,那么新的圖形會和前面的圖形連接在一起

三、畫第一個連接處

ctx.quadraticCurveTo((x - innerRadius) - thickness / 2, y - thickness, x - innerRadius, y)

連接外是用二次貝塞爾曲線來畫的,Canvas的 quadraticCurveTo(cp1x, cp1y, x, y) 方法接受4個參數,第一、二個參數為控制點,第三、四個參數為結束點官方文檔
只需算出控制點和結束點,就可以畫出一個圓弧

四、畫第二個圓弧

ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)

注意方法后面最后一個參數,設置為true,代表逆時針繪制(默認是順時針)

五、畫第二個連接處

ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)

這一步其實和第三步相差不大,簡單的調換了下參數位置

六、填充

 ctx.fill();

至此,一個簡單的未閉合的圓環就完成了

畫第二個進度條圓環

七、初始化

ctx.beginPath();
ctx.fillStyle = "#e87c7c";

beginPath 表示繪制新的圖形,如果不調用此方法,那后面畫的圖形會和前面畫的圖形連在一起

八、繪制第二個進度條圓環

ctx.beginPath();
ctx.fillStyle = "#e87c7c";
ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2)
ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y)
ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true)
ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)

ctx.fill();

由于和第一個圓環繪制方式一模一樣,就不在重復了,區別僅僅是圓的弧度

九、旋轉 Canvas

transform: rotate(-135deg);

由于css的旋轉比較方便,也省去了角度的計算,所以本人使用的是css的transform來旋轉的。當然 Canvas 也提供了旋轉的方法

完整代碼

 

<!DOCTYPE html>
<html lang="cn">

<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>canvas</title>
    <style>
        .ring {
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
        }

        #tutorial {
            transform: rotate(-135deg);
            width: 150px; 
            height: 150px;
        }

        .fraction {
            position: absolute;
            font-size: 30px;
            font-weight: bold;
            color: red;
        }

        .small {
            font-size: 12px;
            font-weight: lighter;
        }

        .title {
            color: red;
            bottom: 0;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="ring">
        <canvas id="tutorial" width="150" height="150"></canvas>
        <span class="fraction">100 <span class="small">分</span> </span>
        <span class="title">服務分</span>
    </div>

    <script>
        let radius = 75
        let thickness = 10
        let innerRadius = radius - thickness
        let x = 75
        let y = 75
        var canvas = document.getElementById('tutorial');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = "#f2d7d7";

        ctx.beginPath();
        ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)
        ctx.quadraticCurveTo((x - innerRadius) - thickness/2 , y - thickness, x - innerRadius, y)
        ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)
        ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)
        ctx.fill();

        ctx.beginPath();
        ctx.fillStyle = "#e87c7c";
        ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2)
        ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y)
        ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true)
        ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)
        ctx.fill();
    </script>
</body>

</html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

標簽:綏化 中山 赤峰 萍鄉 聊城 盤錦 金昌 阿壩

巨人網絡通訊聲明:本文標題《利用 Canvas實現繪畫一個未閉合的帶進度條的圓環》,本文關鍵詞  利用,Canvas,實現,繪畫,一個,;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《利用 Canvas實現繪畫一個未閉合的帶進度條的圓環》相關的同類信息!
  • 本頁收集關于利用 Canvas實現繪畫一個未閉合的帶進度條的圓環的相關信息資訊供網民參考!
  • 推薦文章
    主站蜘蛛池模板: 抚宁县| 陆河县| 鹤壁市| 鸡泽县| 前郭尔| 双城市| 哈尔滨市| 上虞市| 东海县| 泰和县| 临汾市| 蕲春县| 资源县| 敖汉旗| 宁陕县| 香港 | 荣成市| 尖扎县| 饶阳县| 勃利县| 沁源县| 兴隆县| 丰都县| 封丘县| 交口县| 东乡族自治县| 安达市| 蒲江县| 河西区| 晋宁县| 方山县| 浙江省| 乐业县| 鸡东县| 当涂县| 黔东| 景泰县| 英德市| 四子王旗| 革吉县| 泽库县|