canvas绘制一扇门
时间: 2023-08-03 14:30:04 浏览: 53
以下是Canvas绘制一扇门的示例代码:
```
// 获取Canvas对象
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 绘制门框
context.strokeStyle = "#000000";
context.strokeRect(50, 50, 200, 300);
// 绘制门扇
context.fillStyle = "#8B4513";
context.fillRect(60, 60, 180, 280);
// 绘制门把手
context.beginPath();
context.arc(210, 180, 10, 0, Math.PI * 2, true);
context.fillStyle = "#000000";
context.fill();
```
解释如下:
1. 首先获取到Canvas对象和CanvasRenderingContext2D对象,通过getContext()方法获取到CanvasRenderingContext2D对象。
2. 绘制门框,使用strokeRect()方法绘制一个矩形,参数分别代表矩形左上角的x、y坐标,矩形的宽度和高度。
3. 绘制门扇,使用fillRect()方法填充一个矩形,参数和strokeRect()方法相同。
4. 绘制门把手,使用arc()方法绘制圆形,参数分别代表圆心的x、y坐标,圆的半径,起始角度和结束角度,最后一个参数代表绘制方向,true表示逆时针绘制。使用fill()方法填充圆形。
通过这些步骤,我们就可以在Canvas上绘制一扇门了。