canvas绘制平面图
时间: 2023-08-22 15:09:50 浏览: 69
Canvas是一种HTML5元素,用于在网页上绘制平面图形。通过调用Canvas的API接口,可以使用JavaScript来绘制各种形状,如直线、三角形、矩形和圆。首先,需要在HTML中添加一个Canvas元素,并指定其宽度和高度。然后,通过JavaScript获取Canvas元素的上下文(context),并使用上下文对象调用相应的方法来绘制图形。
例如,要绘制一个简单的矩形,可以使用以下代码:
```html
<body>
<canvas id="mycanvas" width="300px" height="200px"></canvas>
<script>
var canvas = document.querySelector("#mycanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#ADD8E6"; // 设置填充颜色
ctx.fillRect(20, 20, 100, 80); // 绘制填充矩形
ctx.strokeStyle = "black"; // 设置绘制的颜色
ctx.strokeRect(20, 20, 100, 80); // 绘制矩形边框
</script>
</body>
```
在上述代码中,通过querySelector获取Canvas元素,并使用getContext("2d")获取2D上下文。然后,设置填充颜色和绘制颜色,并使用fillRect方法绘制填充矩形,使用strokeRect方法绘制矩形边框。
通过类似的方式,可以使用Canvas的API接口绘制其他形状,如直线、三角形和圆。可以调用相应的方法,如lineTo、moveTo、arc等来实现不同的绘制效果。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *2* *3* [用canvas绘制简单的几何图形](https://blog.csdn.net/qq_57220516/article/details/123311848)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![](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)