HTML5标签canvas制作平面图
时间: 2023-08-10 14:24:14 浏览: 23
HTML5的<canvas>标签可以用来制作各种平面图形,以下是一个简单的示例代码,可以绘制一个矩形和一个圆形:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas绘制平面图</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 100, 100);
// 绘制圆形
ctx.beginPath();
ctx.arc(250, 250, 50, 0, 2 * Math.PI);
ctx.fillStyle = "#00FF00";
ctx.fill();
</script>
</body>
</html>
```
在这个示例代码中,我们首先创建了一个<canvas>元素,并指定了它的宽度和高度,然后获取了这个<canvas>元素的上下文对象ctx,通过这个对象可以进行绘制操作。
我们先使用fillRect()方法绘制了一个红色的矩形,这个方法接受4个参数,分别是矩形左上角的x坐标、y坐标、宽度和高度。然后使用beginPath()方法开始绘制圆形,接着使用arc()方法绘制了一个圆形,这个方法接受6个参数,分别是圆心的x坐标、y坐标、半径、起始弧度、终止弧度和是否顺时针方向绘制。最后使用fill()方法填充圆形内部的颜色。
除了矩形和圆形,<canvas>标签还可以绘制直线、曲线、多边形等各种形状,具体使用方法可以参考相关文档。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://img-home.csdnimg.cn/images/20210720083646.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)