今天這篇文章的主題就是“編寫一個 JavaScript 程式來繪製下圖 [對角線，白到黑的圓圈]。

可能大家初看標題都不知道要實現啥玩意，現在這張圖應該就非常清晰可懂了吧！各位可以自己在本地先嚐試下怎麼用js來實現這張效果圖。

下面是我的實現方法：

 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)
                {
                    //建立圈
 ctx.arc(25+j*50,30+i*50,20,0,Math.PI*2,true);
                    ctx.fill();
                    //在圓圈周圍建立一個邊框，這樣白色的會可見
 ctx.stroke();
                }
            }
            counter++;
        }
    }
    draw();

好的，我們直接來執行這段程式碼，效果如下：

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

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

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

floor()方法：可對一個數進行下舍入；

fill()方法：填充當前的影象（路徑），預設顏色是黑色；

fillStyle屬性：設定或返回用於填充繪畫的顏色、漸變或模式；

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

arc()方法：建立弧/曲線（用於建立圓或部分圓）；

stroke()方法：會實際地繪製出通過 moveTo() 和 lineTo() 方法定義的路徑。預設顏色是黑色。

以上就是用JavaScript繪製一個漸變圓圈對角線的詳細內容。（拼多多培訓）