Test 3 - 復旧用 (Basic usage of canvas / canvas の基本的な使い方)

  • リビジョンの URL スラッグ: User:ethertank/Test_3
  • リビジョンのタイトル: Test 3 - 復旧用 (Basic usage of canvas / canvas の基本的な使い方)
  • リビジョンの ID: 433095
  • 作成日:
  • 作成者: ethertank
  • 現行リビジョン はい
  • コメント

このリビジョンの内容

<canvas> 要素

<canvas> 要素自身を見ていくことからこのチュートリアルを始めましょう。

<canvas id="tutorial" width="150" height="150"></canvas>

この例は srcalt 属性を持っていないこと以外、ほとんど <img> 要素のように見えます。<canvas> 要素は widthheight の二つの属性しかもちません。これらは共に任意で DOM プロパティで設定できます。widthheight 属性が定義されていない場合、横 300 ピクセル、縦 150 ピクセル で初期化されます。
id 属性は <canvas> 要素特有では無く、(ほとんど)全ての HTML 属性に適用できる標準の HTML 属性です(例えば class のように)。常に id を付けることはスクリプトで <canvas> 要素の特定をとても簡単にするので良い考えです。

<canvas> 要素はどんな普通の要素のようにスタイル付けすることもできます(マージン、ボーダー、 背景等)。しかし、これらの規則はキャンバスの実際の描画には影響を与えません。 このチュートリアルで後で実際の描画を行う方法を見ます。スタイルが一切適用されない場合、canvas は完全な透明で初期化されます。

代替内容

<canvas> 要素は紹介されたばかりで Firefox 1.0 と Internet Explorer を含む多くのブラウザで実装されていないため、ブラウザが要素を実装してない場合の代替内容を提供する方法が必要です。

幸運な事にこれはとても簡単です。私たちは代りの内容を canvas 要素の中に提供するだけです。サポートしていないブラウザは要素を完全に無視して代替内容を描画し、他のブラウザは普通に canvas のみを描画します。
例えば、canvas の内容についての文字の説明か動的に描画される内容についての静止画像を提供できます。これはこのようになります。

<canvas id="stockGraph" width="150" height="150">
  現在の株価: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150"/>
</canvas>

: 現在、Apple の実装は canvas の閉じタグ (</canvas>) を認識しないという点で仕様と異なっています。これは、Safari では、すべての代替内容が表示されることを意味しています。これは CSS を用いるか、代替内容を隠すためにスクリプトを使うことによって解決できます。

getContext

HTML ページを作ってそれを Firefox に読み込ませると、<canvas> 要素の領域には何もないのが分かるでしょう。私たちは描き始めるための方法が必要です。それは getContextが提供します。 あらゆる canvas 要素は描画機能にアクセスするための getContext と呼ばれる DOM メソッドを持っています。 getContext描画コンテクストという 1 つの引数しか取ることができません。現在、利用可能なコンテクストは 2D コンテクスト の 1 つしかありません。将来は 3D コンテクストを使えるかもしれませんが、当分は 2D コンテクストで我慢しなければならないでしょう。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

最初の行では {{domxref("document.getElementById","getElementById")}} メソッドを使って DOM ノードを取り出しています。そして getContext メソッドを使って描画コンテクストにアクセスできます。

未サポートのブラウザでの実行を防ぐ

代替内容のように、canvas をサポートしていないブラウザからスクリプトを実行する事を防ぐ方法が必要です。これは getContext メソッドをテストすることで容易にできます。 以上からコードの断片はこのようなものになります。

var canvas = document.getElementById('tutorial');

if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
  // ここに描画コード
}

<canvas> をサポートしてないブラウザが実行をしないように全ての描画コードは if 文の中にあるべきです。

テンプレート

すべてをまとめるなら、簡単な HTML テンプレートはこのようなものになります。私は後でこのチュートリアルで見ることになるすべての例にこのセットアップを使用します。

<!DOCTYPE html>
<html>
<head>
<title>Canvas チュートリアル</title>
<script type="text/javascript">
function draw() {
  var canvas = document.getElementById('tutorial');

  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
  }
}
</script>

<style type="text/css">
  canvas { border: 1px solid black; }
</style>

</head>
<body onload="draw();">
  <canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>

このファイルをダウンロード

スクリプトをみると、私の作った draw 関数が呼ばれていることがわかるでしょう。それはページの読み込みが終了したときに一度実行されます(body タグの onload 属性経由)。この関数は {{domxref("window.setTimeout")}} 、 {{domxref("window.setInterval")}} 、もしくはページが最初に読み込まれた後のどんなイベントハンドラ関数からも呼ぶことが出来ます。

簡単な実例

不透明の四角形の上に透明度を持つ別の四角形を重ねて描画する簡単な例です。後のページで詳しく仕組みを見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<script>

function draw() {
  var canvas = document.getElementById("canvas");

  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
  }
}
</script>
</head>
<body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

上記の例は、このように見えます。

{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}
{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}

このリビジョンのソースコード

<h2 id="The_.3Ccanvas.3E_element" name="The_.3Ccanvas.3E_element"><code>&lt;canvas&gt;</code> 要素</h2>
<p><code>&lt;canvas&gt;</code> 要素自身を見ていくことからこのチュートリアルを始めましょう。</p>
<pre class="brush:xml">
&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
<p>この例は <code>src</code> と <code>alt</code> 属性を持っていないこと以外、ほとんど <code>&lt;img&gt;</code> 要素のように見えます。<code>&lt;canvas&gt;</code> 要素は <b>width</b> と <b>height</b> の二つの属性しかもちません。これらは共に任意で <a href="/ja/docs/DOM">DOM</a> プロパティで設定できます。<code>width</code> と <code>height</code> 属性が定義されていない場合、横 <b>300 ピクセル</b>、縦 <b>150 ピクセル</b> で初期化されます。<br />
  <code>id</code> 属性は <code>&lt;canvas&gt;</code> 要素特有では無く、(ほとんど)全ての HTML 属性に適用できる標準の HTML 属性です(例えば <code>class</code> のように)。常に id を付けることはスクリプトで <code>&lt;canvas&gt;</code> 要素の特定をとても簡単にするので良い考えです。</p>
<p>&lt;canvas&gt; 要素はどんな普通の要素のようにスタイル付けすることもできます(マージン、ボーダー、 背景等)。しかし、これらの規則はキャンバスの実際の描画には影響を与えません。 このチュートリアルで後で実際の描画を行う方法を見ます。スタイルが一切適用されない場合、canvas は完全な透明で初期化されます。</p>
<h3 id="Fallback_content" name="Fallback_content">代替内容</h3>
<p><code>&lt;canvas&gt;</code> 要素は紹介されたばかりで Firefox 1.0 と Internet Explorer を含む多くのブラウザで実装されていないため、ブラウザが要素を実装してない場合の代替内容を提供する方法が必要です。</p>
<p>幸運な事にこれはとても簡単です。私たちは代りの内容を canvas 要素の中に提供するだけです。サポートしていないブラウザは要素を完全に無視して代替内容を描画し、他のブラウザは普通に canvas のみを描画します。<br />
  例えば、canvas の内容についての文字の説明か動的に描画される内容についての静止画像を提供できます。これはこのようになります。</p>
<pre class="brush:xml">
&lt;canvas id="stockGraph" width="150" height="150"&gt;
  現在の株価: $3.15 +0.15
&lt;/canvas&gt;

&lt;canvas id="clock" width="150" height="150"&gt;
  &lt;img src="images/clock.png" width="150" height="150"/&gt;
&lt;/canvas&gt;</pre>
<p><b>注</b>: 現在、Apple の実装は canvas の閉じタグ (&lt;/canvas&gt;) を認識しないという点で仕様と異なっています。これは、Safari では、すべての代替内容が表示されることを意味しています。これは CSS を用いるか、代替内容を隠すためにスクリプトを使うことによって解決できます。</p>
<h2 id="The_Rendering_Context" name="The_Rendering_Context">getContext</h2>
<p>HTML ページを作ってそれを Firefox に読み込ませると、<code>&lt;canvas&gt;</code> 要素の領域には何もないのが分かるでしょう。私たちは描き始めるための方法が必要です。それは <code>getContext</code>が提供します。 あらゆる <code>canvas</code> 要素は描画機能にアクセスするための <code>getContext</code> と呼ばれる DOM メソッドを持っています。 <code>getContext</code> は<strong>描画コンテクスト</strong>という 1 つの引数しか取ることができません。現在、利用可能なコンテクストは <em>2D コンテクスト</em> の 1 つしかありません。将来は 3D コンテクストを使えるかもしれませんが、当分は 2D コンテクストで我慢しなければならないでしょう。</p>
<pre class="brush:js">
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');</pre>
<p>最初の行では {{domxref("document.getElementById","getElementById")}} メソッドを使って DOM ノードを取り出しています。そして <code>getContext</code> メソッドを使って描画コンテクストにアクセスできます。</p>
<h3 id="Checking_for_support" name="Checking_for_support">未サポートのブラウザでの実行を防ぐ</h3>
<p>代替内容のように、canvas をサポートしていないブラウザからスクリプトを実行する事を防ぐ方法が必要です。これは <code>getContext</code> メソッドをテストすることで容易にできます。 以上からコードの断片はこのようなものになります。</p>
<pre class="brush:js">
var canvas = document.getElementById('tutorial');

if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
  // ここに描画コード
}</pre>
<p><code>&lt;canvas&gt;</code> をサポートしてないブラウザが実行をしないように全ての描画コードは <code>if</code> 文の中にあるべきです。</p>
<h2 id="A_skeleton_template" name="A_skeleton_template">テンプレート</h2>
<p>すべてをまとめるなら、簡単な HTML テンプレートはこのようなものになります。私は後でこのチュートリアルで見ることになるすべての例にこのセットアップを使用します。</p>
<pre class="brush:xml">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Canvas チュートリアル&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function draw() {
  var canvas = document.getElementById('tutorial');

  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
  }
}
&lt;/script&gt;

&lt;style type="text/css"&gt;
  canvas { border: 1px solid black; }
&lt;/style&gt;

&lt;/head&gt;
&lt;body onload="draw();"&gt;
  &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<p><a class="button liveSample" href="http://developer.mozilla.org/samples/canvas-tutorial/1_1_canvas_template.html">このファイルをダウンロード</a></p>
<p>スクリプトをみると、私の作った <code>draw</code> 関数が呼ばれていることがわかるでしょう。それはページの読み込みが終了したときに一度実行されます(<code>body</code> タグの <code>onload</code> 属性経由)。この関数は {{domxref("window.setTimeout")}} 、 {{domxref("window.setInterval")}} 、もしくはページが最初に読み込まれた後のどんなイベントハンドラ関数からも呼ぶことが出来ます。</p>
<h2 id="A_simple_example" name="A_simple_example">簡単な実例</h2>
<p>不透明の四角形の上に透明度を持つ別の四角形を重ねて描画する簡単な例です。後のページで詳しく仕組みを見ていきましょう。</p>
<p><img align="right" src="/@api/deki/files/602/=Canvas_ex1.png" /></p>
<pre class="brush: html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script&gt;

function draw() {
  var canvas = document.getElementById("canvas");

  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
  }
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="draw();"&gt;
    &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<!--p><a class="button liveSample" href="/@api/deki/files/2931/=simple_example_(1).html">実際の表示を確認</a></p-->
<p>上記の例は、このように見えます。</p>
<div>
  {{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</div>
<div>
  {{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}</div>
Revert to this revision