HTML Canvas 描画

キャンバス上にJavaScriptを使用して描画

HTMLキャンバス上のすべての描画は、JavaScriptを使用して行わなければなりません：

例

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>

自分で試してみてください

第 1 步：Canvas要素を見つける

まず、<canvas>要素を見つける必要があります。

これは HTML DOM メソッド getElementById() を使用して行われます：

const canvas = document.getElementById("myCanvas");

第 2 步：描画オブジェクトの作成

次に、キャンバス描画オブジェクトが必要です。

getContext() は、描画に使用される属性とメソッドを提供する組み込みの HTML オブジェクトです：

const ctx = canvas.getContext("2d");

第 3 步：キャンバス上に描画

最後に、キャンバス上に描画を行うことができます。

描画オブジェクトの塗りつぶしスタイルを赤に設定します：

ctx.fillStyle = "#FF0000";

fillStyle 属性は、CSS 項色、グラデーションまたはパターンで指定できます。デフォルトの fillStyle は黒です。

fillRect(x,y,width,height) メソッドは、キャンバス上に矩形を描画し、塗りつぶしスタイルで塗りつぶします：

ctx.fillRect(0, 0, 150, 75);

参照してください：

CodeW3C.com の完全な Canvas リファレンスマニュアル