h5水波纹扩散特效
时间: 2023-06-29 22:04:11 浏览: 54
实现水波纹扩散特效可以使用HTML5的canvas元素和JavaScript来实现。具体实现步骤如下:
1. 创建一个canvas元素,并设置它的宽度和高度。
```html
<canvas id="myCanvas" width="500" height="500"></canvas>
```
2. 获取canvas元素的上下文对象,并设置线条的颜色和宽度。
```javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "blue";
ctx.lineWidth = 3;
```
3. 定义一个数组,用于存储每个圆形的半径和透明度。
```javascript
var circles = [];
```
4. 在canvas上绘制一个圆形,并将其添加到数组中。
```javascript
function addCircle(x, y) {
circles.push({x: x, y: y, r: 0, alpha: 1});
}
canvas.addEventListener("mousedown", function(e) {
addCircle(e.clientX, e.clientY);
});
```
5. 编写一个函数,用于绘制所有的圆形,并更新每个圆形的半径和透明度。
```javascript
function drawCircles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < circles.length; i++) {
var circle = circles[i];
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI);
ctx.globalAlpha = circle.alpha;
ctx.stroke();
circle.r += 2;
circle.alpha -= 0.02;
if (circle.alpha <= 0) {
circles.splice(i, 1);
i--;
}
}
requestAnimationFrame(drawCircles);
}
drawCircles();
```
6. 最后,使用CSS样式设置canvas元素的背景颜色和边框样式,以及添加一些文本说明。
```css
#myCanvas {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
body {
text-align: center;
font-family: Arial, sans-serif;
margin-top: 50px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
p {
font-size: 16px;
color: #666;
}
```
完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水波纹特效</title>
<style>
#myCanvas {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
body {
text-align: center;
font-family: Arial, sans-serif;
margin-top: 50px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
p {
font-size: 16px;
color: #666;
}
</style>
</head>
<body>
<h1>水波纹特效</h1>
<p>点击鼠标左键添加水波纹。</p>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "blue";
ctx.lineWidth = 3;
var circles = [];
function addCircle(x, y) {
circles.push({x: x, y: y, r: 0, alpha: 1});
}
canvas.addEventListener("mousedown", function(e) {
addCircle(e.clientX, e.clientY);
});
function drawCircles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < circles.length; i++) {
var circle = circles[i];
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI);
ctx.globalAlpha = circle.alpha;
ctx.stroke();
circle.r += 2;
circle.alpha -= 0.02;
if (circle.alpha <= 0) {
circles.splice(i, 1);
i--;
}
}
requestAnimationFrame(drawCircles);
}
drawCircles();
</script>
</body>
</html>
```