如何在Canvas中绘制矩形？

图形开发canvashtml5

在Canvas中绘制矩形是一项直观且相对简单的任务，这得益于HTML5 Canvas API提供了一套丰富的绘图功能。Canvas API中的fillRect()方法是专门用于绘制实心矩形的，它允许开发者通过简单的函数调用，在Canvas元素上绘制出具有指定位置和尺寸的矩形区域。这个方法需要四个参数：矩形的x坐标、y坐标、宽度和高度。

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 绘制矩形示例</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>

    <script>
        // 获取canvas元素
        var canvas = document.getElementById('myCanvas');
        // 获取2D渲染上下文
        var ctx = canvas.getContext('2d');

        // 设置填充颜色
        ctx.fillStyle = 'blue';

        // 绘制矩形
        // 参数分别为：矩形的x坐标、y坐标、宽度、高度
        ctx.fillRect(50, 50, 200, 100);
    </script>
</body>
</html>

尝试一下 »

在上述代码中，我们首先创建了一个canvas元素，并为其指定了宽度和高度。然后，我们通过getContext('2d')方法获取了一个2D渲染上下文，并存储在变量ctx中。接下来，我们设置了填充颜色为蓝色，并使用fillRect()方法绘制了一个矩形。这个矩形的左上角位于坐标(50, 50)，宽度为200像素，高度为100像素。

当你运行这段代码时，你应该会在页面上看到一个蓝色的矩形。

上一篇：Canvas基础知识

下一篇：Canvas如何绘制旋转的图形？