HTML5繪制上下移動矩形是一種很有趣的編程技巧。下面我們來學習一下相應的代碼。
<!DOCTYPE html>
<html>
<head>
<title>Move Rectangle Demo</title>
<style>
#myCanvas {
border: 1px solid #d3d3d3;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 50;
var y = 0;
var speed = 2;
function drawRectangle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#0095DD";
ctx.fillRect(x, y, 50, 50);
}
function moveRectangle() {
if (y >canvas.height) {
y = 0;
} else {
y += speed;
}
drawRectangle();
}
setInterval(moveRectangle, 10);
</script>
</body>
</html>代碼解釋：
首先，我們在HTML文件中創(chuàng)建了一個canvas標簽，并在JavaScript文件中獲得了該標簽的上下文。接下來，我們定義了三個變量。變量x和y定義了矩形的起始位置，變量speed定義了矩形下移的速度。
然后，我們定義了兩個函數(shù)。drawRectangle函數(shù)用于繪制矩形，moveRectangle函數(shù)則用于讓矩形下移。
在moveRectangle函數(shù)中，我們首先判斷矩形是否超出了畫布的底部。如果超出了，就將矩形的y坐標重置為0；否則，就按照指定的速度將矩形下移。然后，在每次移動矩形后都調(diào)用drawRectangle函數(shù)進行重繪。
最后，我們使用setInterval方法每隔10毫秒調(diào)用一次moveRectangle函數(shù)，以達到讓矩形不斷下移的效果。
上一篇mysql5.7書籍
下一篇li的點css樣式大小