用canvas画杯子的水蒸汽
时间: 2023-11-10 17:52:45 浏览: 52
好的,以下是一个简单的画杯子水蒸汽的示例代码:
```html
<canvas id="myCanvas" width="300" height="300"></canvas>
```
```javascript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 画杯子
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(250, 150);
ctx.quadraticCurveTo(280, 150, 280, 180);
ctx.lineTo(280, 250);
ctx.quadraticCurveTo(280, 280, 250, 280);
ctx.lineTo(50, 280);
ctx.quadraticCurveTo(20, 280, 20, 250);
ctx.lineTo(20, 180);
ctx.quadraticCurveTo(20, 150, 50, 150);
ctx.fillStyle = "brown";
ctx.fill();
// 画水蒸汽
ctx.beginPath();
ctx.arc(150, 100, 50, 0, Math.PI * 2);
ctx.arc(120, 120, 50, 0, Math.PI * 2);
ctx.arc(180, 120, 50, 0, Math.PI * 2);
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.fill();
```
这段代码首先创建了一个 `canvas` 元素,然后获取了它的 2D 上下文 `ctx`。接着使用 `beginPath()` 方法开始绘制杯子的路径,使用 `moveTo()` 和 `lineTo()` 方法画出杯子的形状,并使用 `quadraticCurveTo()` 方法画出杯子的弯曲部分。最后使用 `fillStyle` 属性来设置杯子的颜色,使用 `fill()` 方法填充杯子的路径,使其显示出来。
接下来使用 `beginPath()` 方法开始绘制水蒸汽的路径,使用 `arc()` 方法画出三个圆形,分别表示水蒸汽的三个部分。最后设置 `fillStyle` 属性为半透明白色,并使用 `fill()` 方法填充水蒸汽的路径,使其显示出来。
你可以根据自己的需要进行调整和修改。
相关推荐
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)