溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用canvas怎么實現一個流水燈效果？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
具體內容如下
<!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>關于使用canvas怎么實現一個流水燈效果問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
