ホームページ >ウェブフロントエンド >H5 チュートリアル >fillRectメソッドの使い方

fillRectメソッドの使い方

不言オリジナル: 2019-02-11 17:21:0912912ブラウズ

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メソッドの使い方

この記事はここで終わります。フロントエンドに関するさらに興味深い内容については、次の関連コラムチュートリアルを参照してください。 PHP中国語ウェブサイトです！！！

以上がfillRectメソッドの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：html5でできること次の記事：html5でできること

続きを見る