您好,登錄后才能下訂單哦!
使用canvas怎么實(shí)現(xiàn)一個(gè)流水燈效果?針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。
具體內(nèi)容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于canvas超炫酷的流水燈效果</title> <style> *{ margin: 0; padding: 0; } canvas{ border: 1px solid red; width: 100%; height: 100%; } </style> </head> <body onselectstart="return false"> <!-- 添加canvas標(biāo)簽,并加上紅色邊框以便于在頁(yè)面上查看 --> <canvas id="myCanvas" > 您的瀏覽器不支持canvas標(biāo)簽。 </canvas> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var cx1 = canvas.offsetLeft; var cy1 = canvas.offsetTop; var cx2 = canvas.offsetLeft + canvas.offsetWidth; var cy2 = canvas.offsetTop + canvas.offsetHeight; var bbox = canvas.getBoundingClientRect(); $(function(){ var direction = 'right',x = y = right_count = down_count = left_count = up_count = 0; ctx.beginPath(); //開始一個(gè)新的繪制路徑 ctx.moveTo(x, y); //定義直線的起點(diǎn)坐標(biāo)為(0,0) setInterval(function(){ ctx.strokeStyle = '#'+Math.floor(Math.random()*16777215).toString(16); switch(direction){ case 'right': if(x >= 300 - right_count){ direction = 'down'; right_count++; }else{ x++; } break; case 'down': if(y >= 150 - down_count){ direction = 'left'; down_count++; }else{ y++; } break; case 'left': if(x <= left_count){ direction = 'up'; left_count++; }else{ x--; } break; case 'up': if(y <= up_count + 1){ direction = 'right'; up_count++; }else{ y--; } break; } ctx.lineTo(x, y); ctx.lineCap = 'round'; ctx.lineWidth = 1; //設(shè)置線段的寬度 ctx.stroke(); //沿著坐標(biāo)點(diǎn)順序的路徑繪制直線 }, 1); }) </script> </body> </html>
關(guān)于使用canvas怎么實(shí)現(xiàn)一個(gè)流水燈效果問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。