fillRect要领怎样运用【html5教程】

fillRect是HTML5中的要领，能够用于在画布上绘制已添补的矩形，默许的添补色彩是黑色，下面我们就来看一看fillRect要领的细致运用。

我们先来看一下fillRect的基础语法

context.fillRect(x,y,width,height);

x示意矩形左上角的 x 坐标。

y示意矩形左上角的 y 坐标。

width示意矩形的宽度。

height示意矩形的高度。

（参考：HTML5 canvas）

下面我们来看细致的示例

代码以下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    <canvas id="rectangle" width="200" height="200"></canvas>
    <script>
    // 运用JS猎取canvas元素
        var canvas=document.getElementById('rectangle');
        // 猎取canvas
        var c=canvas.getContext('2d');
        // 在画布上绘制一个矩形
        c.fillRect(50,50,100,100);
    </script>
</body>
</html>

结果以下：绘制了一个添补黑色的矩形