999久久精品国产,中文字幕一区2区3区,青青久视频

探索HTML5 Canvas：解鎖JavaScript中的動態圖形繪制技術，繪制驗證碼和進度條

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

freeflydom

2024年5月31日 10:11 本文熱度 905

1. 圓形的繪畫

canvas最基本的步驟：

let canvas = document.getElementById("canvas")

let ctx = canvas.getContext("2d")

獲取canvas這個點擊事件
獲取nvas元素的2D渲染上下文，'2d'指代二維繪圖上下文。
填充矩形: ctx.fillRect(0,0,100,100) 這行代碼在canvas上繪制了一個填充的矩形。fillRect(x, y, width, height)方法接受四個參數，分別代表矩形的左上角坐標(x, y)以及矩形的寬度和高度。在這個例子中，矩形的左上角位于(0, 0)，寬高都是100px，默認使用的是上下文的當前填充色（如果未指定，默認是黑色）。
設置描邊顏色: ctx.strokeStyle = 'red' 這行代碼設置了接下來要繪制圖形的描邊顏色為紅色。strokeStyle屬性控制了所有后續描邊操作的顏色。
描邊矩形: ctx.strokeRect(0,0,100,100) 最后這行代碼在同樣的位置(0, 0)繪制了一個寬度和高度都為100px的矩形的邊框，顏色為之前設置的紅色。strokeRect()方法只繪制邊框，不填充內部。

效果是在canvas上首先繪制了一個100x100像素的填充矩形，然后在同一位置繪制了一個相同尺寸但只有邊框的紅色矩形，形成了一個帶有紅色邊框的正方形。

        ctx.fillRect(0,0,100,100)
        ctx.strokeStyle = 'red' //
        ctx.strokeRect(0,0,100,100) // 描邊

達到預期的效果。

再畫一個圓形并且填充顏色：

 ctx.beginPath()     //多邊形的描繪，開始一個路徑的描述
        ctx.arc(150,75,50,0,2 * Math.PI)
        ctx.fillStyle = 'green'
        ctx.fill()

開始路徑: ctx.beginPath() 這行代碼表示開始一個新的路徑描述。在Canvas中，當你想要繪制獨立的形狀時（避免它們自動連接），通常會在繪制前調用此方法。這樣可以確保新圖形的起點不會與前一個圖形的終點相連。
繪制圓形: ctx.arc(150, 75, 50, 0, 2 * Math.PI) 這行代碼用于繪制一個圓形。arc(x, y, radius, startAngle, endAngle) 方法用于創建弧線（用于圓形、部分圓等）。在這個例子中：

x 和 y 分別是圓心的坐標，即 (150, 75)。
radius 是圓的半徑，這里是 50 像素。
startAngle 和 endAngle 定義了圓弧的起始和結束位置，以弧度為單位。0 表示從三點鐘方向開始，而 2 * Math.PI 表示完整一圈，因此會繪制一個完整的圓。

設置填充顏色: ctx.fillStyle = 'green' 這行代碼設置了即將填充圖形的顏色為綠色。
填充圖形: ctx.fill() 調用 fill() 方法后，根據之前設置的填充顏色（這里是綠色），填充當前路徑描述的內部區域，即剛剛定義的圓形。

到這里想一想鏤空的圓形該怎么形成？

 ctx.beginPath()
        ctx.arc(150,75,50,0,2 * Math.PI)
        ctx.strokeStyle = 'blue'
        ctx.lineWidth = 6
        ctx.stroke()

只要注意下格式的更改，繪制圓形的輪廓和寬度即可。

2. 圓形倒計時：

這里主要可以分為三個部分：繪制圓環，數值的確定，以及繪畫的運行。

圓環的制定：

function blueCircle(n) {
        ctx.save()
        ctx.strokeStyle = '#fff'
        ctx.lineWidth = 5
        ctx.beginPath()
        ctx.arc(centerX,centerY,100,-Math.PI / 2,-Math.PI /2 + n * rad)
        ctx.stroke()
        ctx.closePath() // 結束路徑
        ctx.restore()
    }

這里注意一下有Begin的開始，就添加一個Close的結束這樣整體的效果會更好。

計算數值：

function text(n) {
        ctx.save() //
        ctx.strokeStyle = '#fff'
        ctx.font = '40px Arial'
        ctx.strokeText(n.toFixed(0) + '%',centerX - 25,centerY + 10)
        // ctx.stroke()
        ctx.restore() // 跟save一樣
    }這保證接下來的樣式只生效于這一段。

Draw的繪畫

(function draw() {
            requestAnimationFrame(draw)
            ctx.clearRect(0, 0, canvas.width, canvas.height)


            text(speed)
            blueCircle(speed)
            if (speed >= 100) {
                speed = 100
            }
            speed += 0.1
        })()

這里的定時器除了基本的兩種：setTimeout() 和 setTimeout()，還可以使用requestAnimationFrame（）來執行。

基本的效果可以達成：

3. 驗證碼

其實驗證碼的寫法也是類似，這里就不多敘述了，效果如下，

大家可以看看源碼更正一下：

<!DOCTYPE html>
<html>


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>
    <canvas id="canvas" width="120" height="40" onclick="draw()"></canvas>






    <script>
        let pool = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'


        function randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min)
        }


        function randomColor(min, max) {
            const r = randomNum(min, max)
            const g = randomNum(min, max)
            const b = randomNum(min, max)
            return `rgb(${r},${g},${b})`
        }




        function draw() {
            let canvas = document.getElementById("canvas");
            let ctx = canvas.getContext("2d");
            // 填充色 隨機
            ctx.fillStyle = randomColor(100, 230)
            ctx.fillRect(0, 0, canvas.width, canvas.height)
            // 隨機生成字符串
            let imgCode = ''
            for (let i = 0; i < 4; i++) {
                const text = pool[randomNum(0, pool.length)]
                imgCode += text
                // 隨機字體大小
                const fontSize = randomNum(18, 40)
                // 隨機旋轉角度
                const deg = randomNum(-30, 30)
                ctx.font = `${fontSize}px Simhei`
                ctx.textBaseline = 'top'
                ctx.fillStyle = randomColor(80, 150)
                ctx.save()  // 將當前狀態封存入棧
                ctx.translate(30 * i + 15, 15)
                ctx.rotate((deg * Math.PI) / 180)
                ctx.fillText(text, -10, -15)
                ctx.restore() //


            }
            // 隨機生成干擾線條
            for (let i = 0; i < 5; i++) {
                ctx.beginPath()
                ctx.moveTo(randomNum(0, canvas.width), randomNum(0, canvas.height))
                ctx.lineTo(randomNum(0, canvas.width), randomNum(0, canvas.height))
                ctx.strokeStyle = randomColor(120,230)
                ctx.closePath()
                ctx.stroke()
            }
            // 隨機小點
            for(let i = 0; i < 40; i++){
                ctx.beginPath()
                ctx.arc(randomNum(0,canvas.width),randomNum(0,canvas.height),1,0,2 * Math.PI)
                ctx.fillStyle = randomColor(150,200)
                ctx.closePath()
                ctx.fill()


            }
        }


        draw()
    </script>
</body>


</html>

作者：長安故里_
鏈接：https://juejin.cn/post/7373876901440815130
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

該文章在 2024/5/31 10:15:38 編輯過

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

探索HTML5 Canvas：解鎖JavaScript中的動態圖形繪制技術，繪制驗證碼和進度條

1. 圓形的繪畫

2. 圓形倒計時：

3. 驗證碼