前端点击一个按钮慢慢画出一条线
时间: 2024-05-03 09:21:13 浏览: 26
可以使用HTML5的canvas元素和JavaScript来实现。以下是一个简单的示例代码:
HTML:
```
<canvas id="myCanvas" width="500" height="500"></canvas>
<button id="drawButton">Draw Line</button>
```
JavaScript:
```
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var drawButton = document.getElementById("drawButton");
function drawLine() {
var x = 50;
var y = 50;
ctx.beginPath();
ctx.moveTo(x, y);
var interval = setInterval(function() {
if (x >= 450) {
clearInterval(interval);
} else {
x += 10;
y += 5;
ctx.lineTo(x, y);
ctx.stroke();
}
}, 50);
}
drawButton.addEventListener("click", drawLine);
```
当点击按钮时,调用drawLine()函数,该函数使用setInterval()每50毫秒增加线的长度,直到到达终点位置。ctx.beginPath()开启一个新的路径,ctx.moveTo()移动到起始位置,ctx.lineTo()绘制线条,ctx.stroke()绘制线条到画布上。最后使用clearInterval()停止setInterval()。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)