怎么用JavaScript繪制一個漸變圓圈對角線

發(fā)布時間：2021-08-06 16:12:16 來源：億速云閱讀：144 作者：chen 欄目：web開發(fā)

這篇文章主要講解了“怎么用JavaScript繪制一個漸變圓圈對角線”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用JavaScript繪制一個漸變圓圈對角線”吧！

今天這篇文章的主題就是“編寫一個 JavaScript 程序來繪制下圖 [對角線，白到黑的圓圈]?！?br/>

可能大家初看標(biāo)題都不知道要實(shí)現(xiàn)啥玩意，現(xiàn)在這張圖應(yīng)該就非常清晰可懂了吧！各位可以自己在本地先嘗試下怎么用js來實(shí)現(xiàn)這張效果圖。

下面是我的實(shí)現(xiàn)方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="myCanvas" width="1500" height="800">
    <p>更新您的瀏覽器!</p>
</canvas>
<script>
    function draw()
    {
        var ctx = document.getElementById("myCanvas").getContext("2d");
        var counter = 0;
        for (var i=0;i<6;i++)
        {
            for (var j=0;j<6;j++)
            {
                //從白到黑
 ctx.fillStyle = "rgb(" + Math.floor(255-42.5*i) + "," + Math.floor(255-42.5*i) +
 "," + Math.floor(255-42.5*j) + ")";
                ctx.beginPath();
                if (i === counter && j === counter)
                {
                    //創(chuàng)建圈
 ctx.arc(25+j*50,30+i*50,20,0,Math.PI*2,true);
                    ctx.fill();
                    //在圓圈周圍創(chuàng)建一個邊框，這樣白色的會可見
 ctx.stroke();
                }
            }
            counter++;
        }
    }
    draw();
</script>
</body>
</html>

好的，我們直接來運(yùn)行這段代碼，效果如下：

怎么用JavaScript繪制一個漸變圓圈對角線

簡單介紹下涉及到的方法：

getElementById()方法：可返回對擁有指定 ID 的第一個對象的引用；

getContext()方法：返回一個用于在畫布上繪圖的環(huán)境；

floor()方法：可對一個數(shù)進(jìn)行下舍入；

fill()方法：填充當(dāng)前的圖像（路徑），默認(rèn)顏色是黑色；

fillStyle屬性：設(shè)置或返回用于填充繪畫的顏色、漸變或模式；

beginPath()方法：開始一條路徑，或重置當(dāng)前的路徑；

arc()方法：創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）；

stroke()方法：會實(shí)際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認(rèn)顏色是黑色。

感謝各位的閱讀，以上就是“怎么用JavaScript繪制一個漸變圓圈對角線”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用JavaScript繪制一個漸變圓圈對角線這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

怎么用JavaScript繪制一個漸變圓圈對角線

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽