1. Home
  2. HTML5キャンバス

HTML5キャンバス2024 年の最新の入門チュートリアル。このコースでは キャンバスとは何ですか？,ブラウザのサポート,キャンバスを作成します（キャンバス）,例,グラフィックスを描画するためにJavaScriptを使用します,例,キャンバス座標,キャンバス - パス,例,例,キャンバス - テキスト,例,例,カンバス - グラデーション,例,例,キャンバス - 画像,イメージを使用します。,例,HTMLキャンバスリファレンスマニュアル,HTMLの<canvas>タグ, について学習できます。

HTML5キャンバス

このようなチャートや他の画像のような<キャンバス>タグのカスタムグラフィックス、あなたはグラフィックスを描画するためにスクリプトを使用する必要があります。

キャンバス（帆布）では赤い長方形、グラデーションの四角形、色の四角形、およびいくつかの色付きのテキストを描画します。

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

キャンバスとは何ですか？

HTML5の<canvas>要素は完了するために、スクリプト（JavaScriptなど）を使ってグラフィックスを描画するために使用されます。

<キャンバス>タグは、グラフィカルコンテナである、あなたは、グラフィックスを描画するためにスクリプトを使用する必要があります。

あなたはCanvaドローパス、ボックス、円、文字、および様々な方法を通じて画像を追加することを使用することができます。

ブラウザのサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorerの9+、Firefoxの、オペラ、クロム、およびSafariのサポートの<canvas>要素。

注：Internet Explorer 8のとIEブラウザの以前のバージョンでは、<キャンバス>要素をサポートしていません。

キャンバスを作成します（キャンバス）

キャンバスページは、矩形が<キャンバス>要素を通して描かれるです。

注：デフォルトでは、<キャンバス>要素にはボーダーやコンテンツがありません。

次のように<キャンバス>簡単な例は次のとおりです。

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

注：ラベルは、通常、（スクリプトがしばしば引用される）、大きさ、幅と高さの属性はキャンバスを定義するid属性を指定する必要があります。

ヒント：あなたは、HTMLページ内に複数の<canvas>要素を使用することができます。

境界線を追加するにはstyle属性を使用します：

例

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

»をお試しください

グラフィックスを描画するためにJavaScriptを使用します

canvas要素自体は電力を消費していません。 すべての作業は、内部的に行わJavaScriptで描画されている必要があります。

例

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

»をお試しください

分析の例：

まず、<キャンバス>要素を探します。

var c=document.getElementById("myCanvas");

次に、コンテキストオブジェクトを作成します。

var ctx=c.getContext("2d");

getContext（ "2D"）オブジェクト内蔵HTML5の目的は、パス、ボックス、円、文字を描画し、画像を追加するためのいくつかの方法がありますです。

赤い四角形を描画するために、次の2行のコード：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

再びfillStyleプロパティを設定すると、CSSカラー、グラデーション、パターンにすることができます。 再びfillStyleのデフォルト設定は＃000000（黒）です。

fillRect（x、y、幅、高さ）メソッドは、現在の方法で塗りつぶされた四角形を定義します。

キャンバス座標

キャンバスは、二次元のグリッドです。

キャンバスの左上隅の座標（0,0）

上記の方法は、fillRectパラメータ（0,0,150,75）を有しています。

これは、意味：左上隅（0,0）からキャンバス上に150x75四角形を描画します。

座標の例

以下に示すように、XとYは、絵画の位置決めのためのキャンバス上のキャンバスの座標。 マウス矩形の移動、表示位置を調整します。

X
Y

キャンバス - パス

キャンバスの塗装ラインでは、我々は次の2つのメソッドを使用します。

  • moveTo（x、y）が始まる行を定義する座標
  • lineTo（x、y）はラインの終わりを定義する座標

脳卒中のように、私たちは「インク」の方法を使用しなければならない線を引きます（）。

例

開始座標（0,0）、および終了座標（200、100）を定義した後、ストローク（線を引くために）メソッドを使用します。

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

JavaScriptを：

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

»をお試しください

キャンバスに円を描き、我々は次のメソッドを使用します。

  • アーク（X、Y、R、停止、開始）

このような（）または塗りつぶし（）ストロークとして、円を描くとき実際には、我々は「インク」アプローチを使用していました。

例

使用して円弧は（）円を描画します。

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

JavaScriptを：

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

»をお試しください

キャンバス - テキスト

次のようにテキスト、重要なプロパティとメソッドを描画するキャンバスを使用します。

  • フォント - フォントを定義します
  • fillText（テキスト、x、y）は-キャンバス上の固体テキストを描画します
  • strokeText（テキスト、x、y）は-キャンバス中空のテキストを描画します

fillText（）を使用します。

例

キャンバス上の高30pxテキスト（固体）をレンダリング」のArial」フォントを使用します。

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

JavaScriptを：

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

»をお試しください

strokeText（）を使用します。

例

キャンバス上の高30pxテキスト（中空）をレンダリング」のArial」フォントを使用します。

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

JavaScriptを：

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

»をお試しください

カンバス - グラデーション

勾配は、様々な形状、異なる色を規定することができる、等の矩形、円、線、テキスト、で充填することができます。

ここではキャンバスグラデーションを設定するには、2つの異なる方法があります。

  • createLinearGradientは（X、Y、X1、Y1） -ライン勾配を作成します
  • createRadialGradient（X、Y、R、X1、Y1、R1） -放射状の作成/ラウンド傾斜

我々はグラデーションオブジェクトを使用するときは、2以上の停止色を使用する必要があります。

addColorStop（）のカラーストップを指定する方法は、使用が0-1とすることができるパラメータを記述するために調整します。

再びfillStyleかstrokeStyle値勾配を設定する勾配を使用して、次にそのような長方形、テキスト、またはラインのような形状を描きます。

createLinearGradientは（）を使用します。

例

線形グラデーションを作成します。 グラデーション塗りの四角形を使用します。

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

JavaScriptを：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

»をお試しください

createRadialGradient（）を使用します。

例

ラジアル/円形グラデーションを作成します。 グラデーション塗りの四角形を使用します。

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

JavaScriptを：

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);

»をお試しください

キャンバス - 画像

以下の方法を使用して、キャンバスの上に一枚の画像：

  • drawImage（画像、x、y）は

イメージを使用します。

スクリーム

例

画像がキャンバスに配置されています。

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

JavaScriptを：

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

»をお試しください

HTMLキャンバスリファレンスマニュアル

ラベルの完全なプロパティが参照できるキャンバスリファレンスマニュアルを。

HTMLの<canvas>タグ

Tag 描述
<canvas> HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

ホットチュートリアル

お問い合わせ

HTML5キャンバス
10/30