怎么用css 和 js 画曲线
时间: 2024-06-08 10:07:25 浏览: 13
可以使用CSS和JS结合Canvas来绘制曲线。
首先,可以在HTML中创建一个Canvas元素:
```html
<canvas id="myCanvas"></canvas>
```
然后,在CSS中设置Canvas的宽度和高度,并设置背景颜色等样式:
```css
#myCanvas {
width: 400px;
height: 300px;
background-color: #f2f2f2;
}
```
接下来,在JavaScript中获取Canvas元素,并创建一个绘图上下文:
```javascript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
```
然后,可以使用贝塞尔曲线来绘制曲线。贝塞尔曲线需要四个点来定义,分别为起点、控制点1、控制点2和终点。可以使用`ctx.bezierCurveTo()`方法来绘制贝塞尔曲线。
例如,绘制一个简单的弧线,可以这样写:
```javascript
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.bezierCurveTo(50, 50, 150, 50, 150, 150);
ctx.stroke();
```
这段代码将绘制一个起点为(50, 150),终点为(150, 150),控制点1为(50, 50),控制点2为(150, 50)的弧线。
完整的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>绘制曲线</title>
<style>
#myCanvas {
width: 400px;
height: 300px;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.bezierCurveTo(50, 50, 150, 50, 150, 150);
ctx.stroke();
</script>
</body>
</html>
```
相关推荐
![](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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)