js canvas画矩形

在JavaScript中，使用Canvas绘制矩形主要涉及到<canvas>元素和其上下文（context）对象。以下是基础概念及相关操作：

基础概念

Canvas元素：HTML5引入的一个新元素，用于在网页上绘制图形。
Canvas上下文：通过getContext('2d')方法获取，用于绘制各种图形。

绘制矩形的优势

灵活性：可以绘制各种形状和颜色的矩形。
性能：Canvas是基于位图的，适合大量图形的绘制。
交互性：可以响应用户的交互事件，如点击、拖动等。

绘制矩形的类型

填充矩形：使用fillRect()方法。
描边矩形：使用strokeRect()方法。

应用场景

游戏开发：绘制游戏界面中的各种元素。
数据可视化：绘制图表、柱状图等。
图形编辑器：提供用户绘制和编辑图形的功能。

示例代码

以下是一个简单的示例，展示如何在Canvas上绘制一个填充的矩形和一个描边的矩形：

<!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="500" height="500" style="border:1px solid #000000;"></canvas>
    <script>
        // 获取Canvas元素和上下文
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 绘制填充矩形
        ctx.fillStyle = 'blue'; // 设置填充颜色
        ctx.fillRect(50, 50, 200, 100); // x, y, width, height

        // 绘制描边矩形
        ctx.strokeStyle = 'red'; // 设置描边颜色
        ctx.lineWidth = 5; // 设置描边宽度
        ctx.strokeRect(300, 50, 150, 100); // x, y, width, height
    </script>
</body>
</html>