html 画一个大圆一个小圆镶嵌
时间: 2023-07-01 11:11:38 浏览: 88
要画一个大圆和一个小圆镶嵌,可以使用HTML5的canvas元素和JavaScript来实现。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>大圆小圆镶嵌</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制大圆
ctx.beginPath();
ctx.arc(canvas.width/2, canvas.height/2, 200, 0, 2*Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
// 绘制小圆
ctx.beginPath();
ctx.arc(canvas.width/2, canvas.height/2, 100, 0, 2*Math.PI);
ctx.fillStyle = "white";
ctx.fill();
</script>
</body>
</html>
```
在上面的示例中,我们首先创建了一个canvas元素,并获取了它的上下文对象ctx。然后,我们使用ctx的arc()方法来绘制大圆和小圆,并使用fillStyle属性来设置它们的填充颜色。最后,我们使用ctx的fill()方法来填充圆形区域。为了使小圆镶嵌在大圆中心,我们将两个圆的圆心坐标都设置为canvas的中心点。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)