TECH I.S.

HTML キャンバスグラフィックス


お使いのブラウザは <canvas>要素をサポートしていません。

HTML <canvas>要素は、Webページ上にグラフィックを描画するために使用されます。

左側のグラフィックは<canvas>で作成されています。赤い四角形、グラデーション四角形、多色の四角形、および多色のテキストの4つの要素が表示されます。


HTMLキャンバスとは何ですか?

HTML<canvas>要素は、JavaScriptを介してオンザフライでグラフィックを描画するために使用されます。

<canvas>要素はグラフィックスのコンテナーにすぎません。実際にグラフィックを描画するにはJavaScriptを使用する必要があります。

Canvasには、パス、ボックス、円、テキストを描画し、画像を追加するためのメソッドがいくつかあります。


ブラウザのサポート

表内の数字は、<canvas>要素を完全にサポートする最初のブラウザのバージョンを示します。


要素

<canvas> 4.0 9.0 2.0 3.1 9.0

キャンバスの例

キャンバスは、HTMLページ上の長方形の領域です。デフォルトでは、キャンバスには境界線もコンテンツもありません。

マークアップは次のようになります。

<div><canvas id="myCanvas" width="200" height="100"></canvas></div>

注:常にid属性 (スクリプト内で参照される)と、widthheightキャンバスのサイズを定義する幅と高さの属性を指定してください。境界線を追加するには、style属性を使用します。

基本的な空のキャンバスの例を次に示します。

お使いのブラウザはCanvas要素をサポートしていません。

<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"> </canvas>


JavaScriptを追加する

長方形のキャンバス領域を作成した後、描画を行うためのJavaScriptを追加する必要があります。

ここではいくつかの例を示します。

線を引く

お使いのブラウザはキャンバス要素をサポートしていません

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); </script>


円を描く

お使いのブラウザはキャンバス要素をサポートしていません

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); </script>


テキストを描く

お使いのブラウザはキャンバス要素をサポートしていません

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); </script>


ストロークテキスト

お使いのブラウザはキャンバス要素をサポートしていません

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World", 10, 50); </script>


線形グラデーションを描く

お使いのブラウザはキャンバス要素をサポートしていません

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // グラデーションの作成 var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // グラデーションで塗りつぶす ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </script>


円形のグラデーションを描く

お使いのブラウザはキャンバス要素をサポートしていません

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </script>


画像を描く

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img, 10, 10); </script>


HTMLキャンバスのチュートリアル

<canvas>について詳しくは、HTMLキャンバスのチュートリアルをご覧ください。

プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細