站長資訊網在之前的文章《js的趣味實現：給你一個戴眼鏡的笑臉》中給大家介紹了如何用js畫一個戴眼鏡的笑臉，還蠻好玩的~感興趣的朋友可以去看一下哈哈~那么本文繼續給大家介紹一個有意思的繪圖方法。
今天這篇文章的主題就是“編寫一個 JavaScript 程序來繪制下圖 [對角線，白到黑的圓圈]。”
可能大家初看標題都不知道要實現啥玩意，現在這張圖應該就非常清晰可懂了吧！各位可以自己在本地先嘗試下怎么用js來實現這張效果圖。
下面是我的實現方法：
<!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) { //創建圈 ctx.arc(25+j*50,30+i*50,20,0,Math.PI*2,true); ctx.fill(); //在圓圈周圍創建一個邊框，這樣白色的會可見 ctx.stroke(); } } counter++; } } draw(); </script> </body> </html>
好的，我們直接來運行這段代碼，效果如下：
簡單介紹下涉及到的方法：
getElementById()方法：可返回對擁有指定 ID 的第一個對象的引用；
getContext()方法：返回一個用于在畫布上繪圖的環境；
floor()方法：可對一個數進行下舍入；
fill()方法：填充當前的圖像（路徑），默認顏色是黑色；
fillStyle屬性：設置或返回用于填充繪畫的顏色、漸變或模式；
beginPath()方法：開始一條路徑，或重置當前的路徑；
arc()方法：創建弧/曲線（用于創建圓或部分圓）；
stroke()方法：會實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色。
最后給大家推薦《JavaScript基礎教程》~歡迎大家學習~
