求助Canvas如何绘制矩形？

图形开发canvashtml5

矩形，作为日常生活中最常见的图形之一，Canvas提供了简单的方法来绘制它。只需要一行代码，你就可以画出矩形的边框，或者填充的矩形。

要绘制矩形的边框，你可以使用以下代码：

1
ctx.strokeRect(x, y, width, height)

而要绘制填充的矩形，你可以使用：

1
ctx.fillRect(x, y, width, height)

在上述两个方法中，你只需要指定矩形的起始坐标(x,y)和宽和高，就可以画出矩形了。

让我们看一个例子：

示例效果与源代码：

运行效果

运行以下代码，你会看到一个简单的矩形绘制效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <title>绘制基本图形</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body style="overflow: hidden; margin:0px;">
    <canvas id="canvas" width="1200" height="800"></canvas>
</body>
<script>
    // 获取画布对象
    let canvas = document.getElementById('canvas');
    // 获取2D渲染上下文对象
    let ctx = canvas.getContext('2d');

    // 绘制左侧的边框矩形
    ctx.strokeRect(50, 50, 200, 100);
    // 绘制右侧的填充矩形
    ctx.fillRect(350, 50, 200, 100);
</script>
</html>

点击"尝试一下"按钮，你可以在新的页面中看到绘制的矩形效果。
本文到这里就结束了，希望大家在Canvas画板中“画”得愉快~我们下次再见^__^

上一篇：烟花特效-Canvas解决方案

下一篇：在JavaScript中，如何创建一个函数，并在HTML中调用它？