求助详细讲解在Canvas画布上绘制矩形的实现过程

图形开发canvashtml5

我们对矩形是有一定了解的，那么要在画布上绘制出一个矩形该怎么实现呢？可以使用坐标来定义矩形的摆放位置，再定义矩形的宽度和高度。其中矩形坐标是指矩形的左上角坐标，例如矩形左上角坐标x为50，y为50。矩形的宽度和高度是指绘制矩形的宽度和高度尺寸，例如矩形宽度为200，高为100。

运行效果

掌握了矩形的基本概念后，接下来，我们讲解矩形的绘制方法，Canvas提供了strokeRect()方法可直接绘制矩形，该方法中的参数为矩形的左上角xy坐标和矩形的宽度和高度。而fillRect()方法则用于绘制填充了颜色的矩形，其参数与strokeRect()方法相同。

运行效果

以下是一个网页示例，演示了如何在Canvas上绘制矩形。

示例效果与源代码：

运行效果

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
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <title>绘制基本图形(绘制矩形)</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="图形系统开发实战:基础篇 示例">
    <meta name="author" content="hjq">
    <meta name="keywords" content="canvas,anygraph,javascript,图形">
</head>

<body style="margin:10px;">
	<canvas id="canvas" width="600" height="200" style="border:solid 1px #CCCCCC; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);"/>
</body>
<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById("canvas");
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext("2d");
    // 设置矩形边框线的宽度
    ctx.lineWidth = 10;
    // 设置矩形边框线的颜色，其中颜色值可以是颜色名称、rgb、16进制
    ctx.strokeStyle = "red";
    // 绘制带边框的矩形
    ctx.strokeRect(50, 50, 200, 100);
    // 设置矩形的填充颜色，其中颜色值可以是颜色名称、rgb、16进制
    ctx.fillStyle = "green";
    // 绘制带填充的矩形 
    ctx.fillRect(350, 50, 200, 100);
</script>

</html>

首先，你需要在HTML文档中添加一个<canvas>元素，并指定其宽度和高度（以像素为单位）。

接下来，在JavaScript中，可以使用Canvas API来绘制矩形。Canvas的绘图上下文（context）是绘图操作的核心，通过它可以调用各种绘图方法。对于矩形，最常用的方法是fillRect()（填充矩形）和strokeRect()（绘制矩形边框）。

总结

通过以上步骤，你就可以在Canvas上绘制矩形了。首先是创建Canvas元素并指定其大小，然后使用JavaScript和Canvas API来绘制矩形。你可以通过修改fillRect()和strokeRect()方法的参数来改变矩形的位置、大小和样式。

记得将JavaScript代码放在<canvas>元素之后，或者确保在DOM加载完成后执行这些代码，以确保Canvas元素已经准备好被访问。

上一篇：如何在Canvas画布上设置矩形的样式？

下一篇：Canvas内部的坐标系简介