canvas制作笑脸
时间: 2023-11-16 09:58:27 浏览: 49
使用canvas可以制作出各种图形,包括卡通笑脸。下面是一个简单的制作卡通笑脸的代码示例:
```
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 画脸,设置脸的填充颜色为 '#fff'
context.fillStyle = '#fff';
context.beginPath();
context.arc(150, 150, 100, 0, Math.PI * 2, true);
context.closePath();
context.fill();
// 画眼睛
context.fillStyle = '#000';
context.beginPath();
context.arc(110, 120, 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(190, 120, 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
// 画嘴巴
context.beginPath();
context.arc(150, 180, 50, 0, Math.PI, false);
context.closePath();
context.stroke();
```
以上代码会在canvas画布上绘制出一个卡通笑脸。其中,`arc()`方法用于绘制圆形,`fill()`方法用于填充颜色,`stroke()`方法用于绘制线条。你可以根据需要调整代码中的参数,来制作出不同形状的笑脸。
相关推荐
![](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)