fillRectメソッドの使い方-H5 チュートリアル-php.cn

fillRectメソッドの使い方

不言

リリース： 2022-04-06 19:09:39

オリジナル

12856 人が閲覧しました

fillRect メソッドは、キャンバス上に塗りつぶされた四角形を描画するために使用されます。構文は "context.fillRect(x,y,width,height);" で、パラメータは "x" と "y" です。 " は長方形の左上隅を表します。隅の x 座標と y 座標、「幅」と「高さ」は長方形の幅と高さを表します。

fillRectメソッドの使い方

#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、HTML5&&CSS3 バージョン。

fillRect は、キャンバス上に塗りつぶされた四角形を描画するために使用できる HTML5 のメソッドです。fillRect メソッドの具体的な使用法を見てみましょう。

まず、

fillRect

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

ログイン後にコピー

x の基本的な構文を見てみましょう。xx は、四角形の左上隅の 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(&#39;rectangle&#39;);
        // 获取canvas
        var c=canvas.getContext(&#39;2d&#39;);
        // 在画布上绘制一个矩形
        c.fillRect(50,50,100,100);
    </script>
</body>
</html>

ログイン後にコピー

効果描画は黒で塗りつぶされた四角形です。

fillRectメソッドの使い方