在Canvas上绘制矩形

Canvas 是 HTML5 提供的一个绘图 API，可以在网页上绘制各种图形和动画。本文将介绍如何使用函数在 Canvas 上绘制矩形，并提供易于理解的代码案例。

绘制矩形的函数

要在 Canvas 上绘制矩形，我们可以使用 fillRect() 函数。该函数接受四个参数，分别是矩形的左上角 x 坐标、左上角 y 坐标、矩形的宽度和高度。

function drawRect(x, y, width, height) {
    // 获取 Canvas 上下文
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // 绘制矩形
    ctx.fillRect(x, y, width, height);
}

上面的代码定义了一个名为 drawRect() 的函数，该函数接受四个参数，分别是矩形的左上角 x 坐标、左上角 y 坐标、矩形的宽度和高度。在函数内部，我们首先获取了 Canvas 的上下文对象 ctx，然后使用 fillRect() 函数绘制矩形。

代码案例

下面是一个使用 drawRect() 函数绘制矩形的代码案例：

// 获取 Canvas 上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 绘制矩形
ctx.fillRect(50, 50, 200, 100);

在上面的代码中，我们首先通过 getElementById() 函数获取了一个 id 为 myCanvas 的 Canvas 元素，并获取了其上下文对象 ctx。然后，我们使用 fillRect() 函数绘制了一个左上角坐标为 (50, 50)，宽度为 200，高度为 100 的矩形。

通过调用 drawRect() 函数，即可在 Canvas 上绘制矩形。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： Canvas绘制圆形教程
• 下一篇： 在Canvas上绘制直线