使用canvas绘制爱心
时间: 2024-05-24 18:04:43 浏览: 14
好的,下面是使用 Canvas 绘制爱心的代码:
```html
<canvas id="myCanvas"></canvas>
```
```javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 设置画布大小
canvas.width = 300;
canvas.height = 300;
// 绘制爱心
ctx.beginPath();
ctx.moveTo(150, 100);
ctx.bezierCurveTo(150, 75, 125, 50, 100, 50);
ctx.bezierCurveTo(75, 50, 50, 75, 50, 100);
ctx.bezierCurveTo(50, 125, 75, 150, 100, 175);
ctx.bezierCurveTo(125, 200, 150, 225, 150, 250);
ctx.bezierCurveTo(150, 225, 175, 200, 200, 175);
ctx.bezierCurveTo(225, 150, 250, 125, 250, 100);
ctx.bezierCurveTo(250, 75, 225, 50, 200, 50);
ctx.bezierCurveTo(175, 50, 150, 75, 150, 100);
ctx.fillStyle = "red";
ctx.fill();
```
这段代码会在指定的canvas元素中绘制一个红色的爱心。具体的实现方式是通过贝塞尔曲线来绘制,可以通过更改贝塞尔曲线的控制点来改变爱心的形状和大小。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)