Web Kit DOM Programming Topics: キャンバスの使用

Safari、Dashboard、およびWeb Kitベースのアプリケーションは、JavaScriptのキャンバスオブジェクトをサポートしています。キャンバスを使うと、自分のHTMLコンテンツ内に任意のコンテンツを容易に描画できます。

Contents:

キャンバスの紹介

キャンバスは、対象のWebコンテンツ内でカスタムの描画領域を定義するHTMLタグです。そのあとキャンバスにJavaScriptオブジェクトとしてアクセスし、Mac OS XのQuartz描画システムに類似した機能を使ってキャンバスに描画できます。「世界時計」Dashboardウィジェット（Mac OS Xバージョン10.4以上のすべてのAppleマシンで利用できます）が良い例ですが、キャンバスの使用はDashboardだけに限定されるわけではありません。

Webページでキャンバスを使用するには、まずコンテンツ領域を定義し、次にHTMLのスクリプトセクションでキャンパスオブジェクトに描画するという2つのステップをとります。

キャンバスの定義

Webページでキャンバスを使うには、まず描画領域を設定します。「世界時計」のDashboardウィジェットでは、次のコードでこの領域を指定しています。

<canvas id="myCanvas" width='172' height='172'/>

ここでは、注目すべき<canvas>の属性はid、width、およびheightです。

id属性はカスタム識別子であり、描画時に特定のキャンバスオブジェクトを対象とするためにこれを使います。width属性とheight属性は、キャンバス領域のサイズを指定します。

「世界時計」ウィジェット内では、この領域は次のようなキャンバスとして定義されています。

キャンバス領域が定義されたので、キャンバスに描画する準備ができました。

キャンバス上での描画

キャンバス領域を定義したら、コンテンツを描画するコードを記述できます。コードを記述する前に、対象のキャンバスとその描画コンテキストを取得する必要があります。描画コンテキストは、コンテンツの実際の描画を処理します。「世界時計」ウィジェットではこれをdrawHands()関数の中で行っています。

function drawHands (hoursAngle, minutesAngle, secondsAngle)

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

    var context = canvas.getContext("2d");

この関数は、「世界時計」の文字盤に時針、分針、秒針を描画します。この関数はパラメータとして、呼び出し側によって渡される3つの針を回転させる角度を受け取ります。

まず、一意の識別子、すなわち<canvas>タグのid属性を使って、すでに定義済みのキャンバスがあるかどうかJavaScript環境に問い合わせます。

スクリプトでキャンバスを取得したら、そのコンテキストを取得する必要があります。getContext("2d")メソッドを使って、キャンバスの描画コンテキストをcontext変数に割り当てます。この時点から、contextのキャンバスを対象とするあらゆる操作を呼び出すことができます。

実行する最初の操作で、キャンバスは空になります。drawHands()関数が1秒おきに呼び出されるため、直前に使われた設定によって、新しい設定が上書きされないように、毎回キャンバスを空にすることが重要です。<canvas>タグ内の基準座標系で定義される、領域全体がクリアされます。

    context.clearRect(0, 0, 172, 172);

次に、最初のコンテキスト空間の状態を保存して、あとで元に戻せるようにしておきます。最初のコンテキストでは、キャンバスの原点（0,0 座標）は左上角にあります。その次の描画コードが完了した時点で、このコンテキストに戻る必要が生じます。これを行うにはコンテキストの保存メソッドを使います。

    context.save();

時計の針を、時計の中心を軸に回転させたいので、コンテキスト空間の原点をキャンバスの中心に変換します。

    context.translate(172/2, 172/2);

次に、時計の文字盤に時針を描画します。現在の（時計の文字盤の中心を原点とする）コンテキストをコピーし、あとで元に戻せるようにしておきます。次に、時針が進む角度にY軸が揃うように、コンテキスト全体を回転させます。次に、時針の画像を描画します（JavaScript Imageオブジェクトとしてコード中に作成されます）。メソッドdrawImage()には5つのパラメータがあります。すなわち、描画する画像、画像の左下角のXおよびY座標、画像の幅と高さです。グラフィックスコンテキスト内では画像は真っすぐの向きで描画しますが、時針を表す正しい角度になるようにコンテキスト自体を回転させたことを思い出してください。

    context.save();

    context.rotate(hoursAngle);

    context.drawImage(hourhand, -4, -28, 9, 25);

    context.restore();

針を描画したら、最後に保存したコンテキストを元に戻します。これは、4行前に保存し、キャンバスの中心に原点があり、まだ回転していないコンテキストが再度アクティブなコンテキストになることを意味します。

同様の手順で、時計の文字盤に分針を描画します。ここでの違いは、コンテキストを回転させる角度と、分針のサイズです。コンテキストを再度保存して回転してから前の状態に戻すことで、分針に必要な回転に関係なく次の要素を描画できるようになっています。

    context.save();

    context.rotate (minutesAngle);

    context.drawImage (minhand, -8, -44, 18, 53);

    context.restore();

最後に、秒針を描画します。今度は、コンテキストを保存して元に戻してはなりません。このコンテキスト（キャンバスの中心に原点がある）への描画はこれが最後であるため、保存してまた元に戻す必要は生じません。

    context.rotate (secondsAngle);

    context.drawImage (sechand, -4, -52, 8, 57);

    context.restore();

時計の文字盤が描画されたので、コンテキストの状態を、描画が行われる前に保存した、最初の状態に戻す必要があります。これで、以降の描画を行うキャンバスの準備が整い、作業の始点となる一貫した原点（キャンバスの左上角）が得られます。

これらのテクニックはすべて、あらゆるWeb Kitベースアプリケーション内のキャンバスオブジェクトに適用できます。キャンバスの詳細については、Canvasを参照してください。




	Get information on Apple products. Visit the Apple Store online or at retail locations. 1-800-MY-APPLE Copyright © 2007 Apple Inc. All rights reserved. \| Terms of use \| Privacy Notice