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