基于canvas實現(xiàn)超炫酷的流水燈效果
更新時間：2021年05月20日 14:45:55 作者：sensus森森
這篇文章主要為大家詳細介紹了基于canvas實現(xiàn)超炫酷的流水燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了基于canvas實現(xiàn)超炫酷的流水燈效果的具體代碼，供大家參考，具體內容如下
<!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標簽，并加上紅色邊框以便于在頁面上查看 -->
<canvas id="myCanvas" >
您的瀏覽器不支持canvas標簽。
</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(); //開始一個新的繪制路徑
ctx.moveTo(x, y); //定義直線的起點坐標為(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; //設置線段的寬度
ctx.stroke(); //沿著坐標點順序的路徑繪制直線
}, 1);
})
</script>
</body>
</html>
效果截圖：
流水燈時刻跑著，這里主要是繞圈圈
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)Tab選項卡切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)表單驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了JS訪問SWF的函數(shù)用法,實例分析了javascript訪問swf文件的方法及易錯點的處理技巧,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細介紹了基于openlayers4實現(xiàn)點的擴散效果 ，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了js實現(xiàn)表單項的全選、反選及刪除操作,結合實例形式分析了基于dedecms后臺使用js實現(xiàn)表單項的全選、反選及刪除相關操作技巧,需要的朋友可以參考下2020-06-06
return false;和e.preventDefault();的區(qū)別
Have you ever seen those two things (in the title) being used in jQuery? Here is a simple2010-07-07
第一次接觸神奇的Bootstrap基礎排版，Bootstrap讓Web開發(fā)更迅速、更簡單，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家詳細介紹了原生js canvas實現(xiàn)簡單貪吃蛇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
Javascript中return與閉包對大家來說應該都不陌生，下面本文就給大家介紹了Javascript中return的使用與閉包。文中給出了詳細的示例代碼，對大家的理解和學習具有一定的參考借鑒價值，感興趣的朋友們下面來一起看看吧。2017-01-01
這篇文章主要介紹了小程序點餐界面添加購物車左右擺動動畫，當用戶點擊添加到購物車后會有一個左右擺動的購物車提示效果，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-09-09