使用canvas绘制图形
时间: 2023-12-05 10:39:01 浏览: 105
使用 Canvas 绘制图形需要以下步骤:
1. 在 HTML 中添加 Canvas 标签,例如:
```html
<canvas id="myCanvas" width="500" height="500"></canvas>
```
其中,id 属性是为了在 JavaScript 中获取 Canvas 元素,width 和 height 属性是设置 Canvas 的宽度和高度。
2. 在 JavaScript 中获取 Canvas 元素,并获取绘图上下文,例如:
```javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
```
其中,getContext("2d") 方法返回一个对象,该对象提供了用于在 Canvas 上绘制的方法和属性。
3. 使用绘图上下文中提供的方法绘制图形,例如:
```javascript
// 绘制矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
// 绘制圆形
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
```
其中,fillStyle 属性设置填充颜色,fillRect() 方法绘制矩形,beginPath() 方法开始一条路径,arc() 方法绘制圆形,stroke() 方法绘制路径。
阅读全文
相关推荐














