怎么创建宽200高150的画布
时间: 2023-06-22 10:38:39 浏览: 91
要创建一个宽为 200,高为 150 的画布,可以在 HTML 中创建一个 `<canvas>` 元素,并设置其宽度和高度属性,如下所示:
```html
<canvas id="myCanvas" width="200" height="150"></canvas>
```
然后可以使用 JavaScript 获取该元素并获取绘图上下文,如下所示:
```javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
```
现在,你就可以在画布上绘制图形了。例如,以下代码绘制一个红色的矩形:
```javascript
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 50);
```
在这个例子中,我们设置填充颜色为红色,并使用 `fillRect` 方法绘制一个矩形,其左上角坐标为 (50, 50),宽度为 100,高度为 50。
完整的代码如下:
```html
<canvas id="myCanvas" width="200" height="150"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 50);
</script>
```
这将在画布上创建一个宽为 200,高为 150 的画布,并在其上绘制一个红色的矩形。
阅读全文