html用css画米老鼠
时间: 2023-09-19 18:08:08 浏览: 76
首先,在HTML中创建一个画布(canvas)元素,然后使用CSS设置画布的宽度和高度。接下来,使用JavaScript在画布上绘制米老鼠的形状。
以下是一个简单的示例代码:
HTML代码:
```html
<canvas id="canvas"></canvas>
```
CSS代码:
```css
#canvas {
width: 200px;
height: 200px;
background-color: white;
}
```
JavaScript代码:
```javascript
// 获取画布元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 绘制米老鼠的头部
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
// 绘制米老鼠的耳朵
ctx.beginPath();
ctx.arc(70, 45, 15, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
ctx.beginPath();
ctx.arc(130, 45, 15, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
// 绘制米老鼠的眼睛和鼻子
ctx.beginPath();
ctx.arc(85, 65, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
ctx.beginPath();
ctx.arc(115, 65, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
ctx.beginPath();
ctx.arc(100, 80, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
```
以上代码将在画布上绘制一个基本的米老鼠形状。你可以使用更复杂的形状和颜色来创建更详细的图像。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)