使用画布元素自行画一个图形
时间: 2024-02-09 13:08:07 浏览: 58
html5的画布canvas——画出简单的矩形、三角形实例代码
好的,以下是一个使用画布元素绘制一个矩形的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Demo</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Canvas Demo</h1>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 100, 100);
</script>
</body>
</html>
```
在这个示例中,我们首先创建一个画布元素并设置其 ID 为“myCanvas”,宽度和高度为 200 像素。然后,我们使用 JavaScript 获取该元素并获取其 2D 上下文,使用 `fillStyle` 属性设置矩形的填充颜色为红色,最后使用 `fillRect` 方法在画布上绘制一个矩形。在这个例子中,矩形的左上角坐标为 (0, 0),宽度和高度都是 100 像素。
阅读全文