From edcbfa42307307b620944e0aa4f6125d47e811eb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 25 Jun 2021 01:34:02 +0900 Subject: Web/API/Canvas_API/Tutorial を更新 (conflicting と統合) (#1207) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - conflicting 版の方が原文に近かったので、こちらを正規版に置き換え - Tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d は内容が古く、他の記事でカバーされていると考えられるため削除 - 履歴とリダイレクトを修正 --- files/ja/_redirects.txt | 12 +- files/ja/_wikihistory.json | 25 +-- .../web/api/canvas_api/tutorial/index.html | 61 ------ .../index.html | 214 --------------------- files/ja/web/api/canvas_api/tutorial/index.html | 86 ++++----- 5 files changed, 44 insertions(+), 354 deletions(-) delete mode 100644 files/ja/conflicting/web/api/canvas_api/tutorial/index.html delete mode 100644 files/ja/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html (limited to 'files') diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 3f3d394e3e..26087d87d6 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -2265,7 +2265,7 @@ /ja/docs/DragDrop/Dragging_and_Dropping_Multiple_Items /ja/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items /ja/docs/DragDrop/Recommended_Drag_Types /ja/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types /ja/docs/DragDrop/ドラッグ＆ドロップ /ja/docs/Web/API/HTML_Drag_and_Drop_API -/ja/docs/Drawing_Graphics_with_Canvas /ja/docs/conflicting/Web/API/Canvas_API/Tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d +/ja/docs/Drawing_Graphics_with_Canvas /ja/docs/Web/API/Canvas_API/Tutorial /ja/docs/Drawing_text_using_a_canvas /ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text /ja/docs/Dynamically_modifying_XUL-based_user_interface /ja/docs/orphaned/Dynamically_modifying_XUL-based_user_interface /ja/docs/E4X/Processing_XML_with_E4X /ja/docs/orphaned/E4X/Processing_XML_with_E4X @@ -2389,7 +2389,7 @@ /ja/docs/HTML/Block-level_elements /ja/docs/Web/HTML/Block-level_elements /ja/docs/HTML/CORS_settings_attributes /ja/docs/Web/HTML/Attributes/crossorigin /ja/docs/HTML/Canvas /ja/docs/Web/API/Canvas_API -/ja/docs/HTML/Canvas/Drawing_Graphics_with_Canvas /ja/docs/conflicting/Web/API/Canvas_API/Tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d +/ja/docs/HTML/Canvas/Drawing_Graphics_with_Canvas /ja/docs/Web/API/Canvas_API/Tutorial /ja/docs/HTML/Canvas/Tutorial /ja/docs/Web/API/Canvas_API/Tutorial /ja/docs/HTML/Content_Editable /ja/docs/Web/Guide/HTML/Editable_content /ja/docs/HTML/Content_categories /ja/docs/Web/Guide/HTML/Content_categories @@ -3725,7 +3725,7 @@ /ja/docs/Web/API/CanvasRenderingContext2D.clearHitRegions /ja/docs/Web/API/CanvasRenderingContext2D/clearHitRegions /ja/docs/Web/API/CanvasRenderingContext2D.drawFocusIfNeeded /ja/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded /ja/docs/Web/API/CanvasRenderingContext2D.removeHitRegion /ja/docs/Web/API/CanvasRenderingContext2D/removeHitRegion -/ja/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas /ja/docs/conflicting/Web/API/Canvas_API/Tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d +/ja/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas /ja/docs/Web/API/Canvas_API/Tutorial /ja/docs/Web/API/ChildNode/remove /ja/docs/orphaned/Web/API/ChildNode/remove /ja/docs/Web/API/ChildNode/replaceWith /ja/docs/orphaned/Web/API/ChildNode/replaceWith /ja/docs/Web/API/Console.error /ja/docs/Web/API/Console/error @@ -4600,9 +4600,9 @@ /ja/docs/Web/Guide/Events/Event_handlers /ja/docs/orphaned/Web/Guide/Events/Event_handlers /ja/docs/Web/Guide/Events/Orientation_and_motion_data_explained /ja/docs/Web/Events/Orientation_and_motion_data_explained /ja/docs/Web/Guide/Events/Overview_of_Events_and_Handlers /ja/docs/orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers -/ja/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas /ja/docs/conflicting/Web/API/Canvas_API/Tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d +/ja/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas /ja/docs/Web/API/Canvas_API/Tutorial /ja/docs/Web/Guide/HTML /ja/docs/Learn/HTML -/ja/docs/Web/Guide/HTML/Canvas_tutorial /ja/docs/conflicting/Web/API/Canvas_API/Tutorial +/ja/docs/Web/Guide/HTML/Canvas_tutorial /ja/docs/Web/API/Canvas_API/Tutorial /ja/docs/Web/Guide/HTML/Canvas_tutorial/Advanced_animations /ja/docs/Web/API/Canvas_API/Tutorial/Advanced_animations /ja/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors /ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors /ja/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations /ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations @@ -4642,7 +4642,7 @@ /ja/docs/Web/Guide/Using_FormData_Objects /ja/docs/conflicting/Web/API/FormData/Using_FormData_Objects /ja/docs/Web/HTML/CORS_settings_attributes /ja/docs/Web/HTML/Attributes/crossorigin /ja/docs/Web/HTML/Canvas /ja/docs/Web/API/Canvas_API -/ja/docs/Web/HTML/Canvas/Drawing_Graphics_with_Canvas /ja/docs/conflicting/Web/API/Canvas_API/Tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d +/ja/docs/Web/HTML/Canvas/Drawing_Graphics_with_Canvas /ja/docs/Web/API/Canvas_API/Tutorial /ja/docs/Web/HTML/Canvas/Tutorial /ja/docs/Web/API/Canvas_API/Tutorial /ja/docs/Web/HTML/Content_Editable /ja/docs/Web/Guide/HTML/Editable_content /ja/docs/Web/HTML/Content_Editable/Rich-Text_Editing_in_Mozilla /ja/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 16b74330ec..85fd91846b 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -11441,6 +11441,8 @@ "Web/API/Canvas_API/Tutorial": { "modified": "2020-09-06T11:19:42.533Z", "contributors": [ + "Uemmra3", + "yyss", "ryokohbato", "Hakuyoka", "mfuji09", @@ -48719,29 +48721,6 @@ "yuki_nichiyama" ] }, - "conflicting/Web/API/Canvas_API/Tutorial": { - "modified": "2019-03-23T23:28:30.956Z", - "contributors": [ - "Uemmra3", - "yyss", - "ethertank" - ] - }, - "conflicting/Web/API/Canvas_API/Tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d": { - "modified": "2019-03-23T23:54:18.694Z", - "contributors": [ - "mfuji09", - "SphinxKnight", - "teoli", - "ethertank", - "Marsf", - "Mgjbot", - "Okome", - "Taken", - "Shimono", - "Victory" - ] - }, "conflicting/Web/API/Crypto/getRandomValues": { "modified": "2019-03-23T22:01:08.359Z", "contributors": [ diff --git a/files/ja/conflicting/web/api/canvas_api/tutorial/index.html b/files/ja/conflicting/web/api/canvas_api/tutorial/index.html deleted file mode 100644 index 8760b0c3de..0000000000 --- a/files/ja/conflicting/web/api/canvas_api/tutorial/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: canvas チュートリアル -slug: conflicting/Web/API/Canvas_API/Tutorial -tags: - - Canvas - - Graphics - - Guide - - HTML - - HTML5 - - Intermediate - - Web -translation_of: Web/API/Canvas_API/Tutorial -original_slug: Web/Guide/HTML/Canvas_tutorial ---- -
{{CanvasSidebar}}
- -
- -
-

<canvas> 要素は、スクリプト (一般的に JavaScript) を使って図形を描くために使われる新しい HTML 要素です。例えば、グラフを描く、写真を合成する、または簡単な (またはあまり簡単ではない) アニメーションに使うことができます。このページの画像は後でこのチュートリアルの中でみる <canvas> を実際に使った例です。

-
- -

このチュートリアルでは、2D グラフィックスを描画するために <canvas> 要素を使用する方法を、基礎から説明します。提供する例は、<canvas> で出来ることの、いくつかの明確なアイデアと、それをあなた自身のコンテンツで作成開始できるようなコードスニペットを提供します。

- -

<canvas> は Apple によって OS X の Dashboard のために WebKit へ初めて導入され、後にブラウザーに実装されました。現在は、あらゆる主要ブラウザーがサポートしています。

- -

始める前に

- -

<canvas> を使うことはそれほど難しくはありませんが、HTML と JavaScript の基本的な理解が必要です。一部の古いブラウザーは <canvas> 要素をサポートしていませんが、最近のバージョンの主要ブラウザーはすべてサポートしています。canvas のデフォルトのサイズは、300 px × 150 px (幅 × 高さ) です。しかし、HTML の height および width プロパティを使用して、独自のサイズを定義することができます。canvas にグラフィックスを描画するためには、JavaScript コンテキストオブジェクトを使用します。このオブジェクトは、グラフィックスをオンザフライで生成します。

- -

チュートリアル

- - - -

関連情報

- - - -

貢献者への注記

- -

2013 年 6 月 17 日の週に発生した不運な技術的エラーにより、すべての過去の貢献者の属性を含む、このチュートリアルの履歴情報が失われました。この問題についておわびするとともに、この不運な事故を容赦願います。

- -
{{Next("Web/API/Canvas_API/Tutorial/Basic_usage")}}
diff --git a/files/ja/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html b/files/ja/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html deleted file mode 100644 index bf51c504f4..0000000000 --- a/files/ja/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: canvas に絵を描く -slug: conflicting/Web/API/Canvas_API/Tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d -tags: - - HTML - - HTML5 - - HTML:Canvas -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas -original_slug: Web/API/Canvas_API/Drawing_graphics_with_canvas ---- -
-

このページには、一部古い内容が含まれています。

-
- -

イントロダクション

- -

Firefox 1.5 より、 Firefox はプログラム可能な画像のための新しい HTML 要素を含みます。<canvas> は WHATWG の canvas の仕様を基にしています。WhatWG canvas 仕様自体は Safari で実装された Apple の <canvas> を基にしています。クライアント上でグラフ、UI 要素、および他のカスタムグラフィックスの描画に使用することができます。

- -

<canvas> は 1 つ以上の描画コンテクスト を公開した固定サイズの描画表面を作ります。現在は 2 次元描画コンテクストのみが実装されています。 3D グラフィックスの描画には、 WebGL レンダリングコンテクストを用いると良いでしょう。

- -

2 次元描画コンテクスト

- -

初歩的な例

- -

始めに、2 つの交差した長方形を描く簡単な例を見てみましょう。片方の長方形は透明度を持っています。

- -
function draw() {
-  var myCanvas = document.getElementById('canvas');
-  var ctx = myCanvas.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);
-}
-
- - - -
{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}
- -

draw 関数は、まず canvas 要素を取得し、次にその canvas 要素 の 2 次元レンダリングコンテクストを取得しています。 ctx オブジェクトは canvas に実際に描画するのに使うことができます。例では CSS color 仕様による 2 つの異なる色を fillStyle プロパティで設定し、fillRect メソッドにより 2 つの長方形を単純に塗りつぶしています。 2 つ目の fillStyle は色と一緒に透明度を定義するために rgba() を使っています。

- -

fillRect() は矩形状の塗りつぶし、strokeRect() は矩形状の輪郭線の描画、 clearRect() はコンテクストの指定部分の消去に用います。より複雑な形を描画するにはパスを用います。

- -

パスの利用

- -

beginPath メソッドは新しいパスの作成を開始します。そして moveTo、lineTo、arcTo、arc などのメソッドはパスにセグメントを加えるのに使われます。パスは closePath メソッドによって閉じることが可能です。パスの作成後、fill か stroke を使って canvas コンテクストにパスを描画します。

- -
function draw() {
-  var myCanvas = document.getElementById('canvas');
-  var ctx = myCanvas.getContext('2d');
-
-  ctx.fillStyle = "red";
-
-  ctx.beginPath();
-  ctx.moveTo(30, 30);
-  ctx.lineTo(150, 150);
-
-  // was: ctx.quadraticCurveTo(60, 70, 70, 150); これは間違い
-
-  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- これが正しい書式 ->
-
-  ctx.lineTo(30, 30);
-
-  ctx.fill();
-}
- - - -
{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}
- -

fill() か stroke() を呼ぶと現在のパスが使われます。 もう一度塗りつぶしか輪郭線を描くにはパスを再作成しなくてはなりません。

- -

レンダリングコンテクストの状態

- -

fillStyle 、strokeStyle 、lineWidth 、 lineJoin のようなコンテクストの属性は、現在のレンダリングコンテクストの状態の一部です。 コンテクストは現在の状態を状態スタックに格納したり取り出したりするために save() と restore() という 2 つのメソッドを提供してます。

- -

より複雑な例

- -

パス、状態、変換行列を用いた少し複雑な例を紹介します。 translate() 、scale() 、rotate() のコンテクストメソッドは全て現在の行列を変換します。 全ての描画された点は最初にこの行列により変換されます。

- -
function drawBowtie(ctx, fillStyle) {
-
-  ctx.fillStyle = "rgba(200,200,200,0.3)";
-  ctx.fillRect(-30, -30, 60, 60);
-
-  ctx.fillStyle = fillStyle;
-  ctx.globalAlpha = 1.0;
-  ctx.beginPath();
-  ctx.moveTo(25, 25);
-  ctx.lineTo(-25, -25);
-  ctx.lineTo(25, -25);
-  ctx.lineTo(-25, 25);
-  ctx.closePath();
-  ctx.fill();
-}
-
-function dot(ctx) {
-  ctx.save();
-  ctx.fillStyle = "black";
-  ctx.fillRect(-2, -2, 4, 4);
-  ctx.restore();
-}
-
-function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // 以後の全て変換はこの変換から相対的であることに注意
-  ctx.translate(45, 45);
-
-  ctx.save();
-  //ctx.translate(0, 0); // 不要
-  drawBowtie(ctx, "red");
-  dot(ctx);
-  ctx.restore();
-
-  ctx.save();
-  ctx.translate(85, 0);
-  ctx.rotate(45 * Math.PI / 180);
-  drawBowtie(ctx, "green");
-  dot(ctx);
-  ctx.restore();
-
-  ctx.save();
-  ctx.translate(0, 85);
-  ctx.rotate(135 * Math.PI / 180);
-  drawBowtie(ctx, "blue");
-  dot(ctx);
-  ctx.restore();
-
-  ctx.save();
-  ctx.translate(85, 85);
-  ctx.rotate(90 * Math.PI / 180);
-  drawBowtie(ctx, "yellow");
-  dot(ctx);
-  ctx.restore();
-}
-
- - - -
{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}
- -

drawBotie 関数及び dot 関数を定義し、 draw 関数内で 4 回使用しています。 それぞれを呼び出す前に、translate() 及び rotate() を現在の変換行列を用意するために用いています。その変換行列は順番に点と蝶ネクタイを配置します。 dot 関数は (0, 0) を中心に小さな黒い正方形を描画します。 dot は変換行列によって移動されます。 drawBowtie は第 1 引数に指定した塗りつぶしスタイルを使い、単純な蝶ネクタイのパスを描画します。

- -

行列の操作は累積されるので、save() 及び restore() はそれぞれが設定した元の canvas の状態に復帰するために使われます。 注目すべきは、回転が常に現在の基点の周りで起こるということです。 従って translate() rotate() translate() の連続は translate() translate() rotate() の連続実行とは異なった結果を生みます。

- -

Apple の <canvas> との互換性

- -

<canvas> は Apple の実装とその他の実装で互換性があります。 しかし、いくつかの注意すべき問題があります。

- -

必須の </canvas> タグ このセクションの内容には古い情報が含まれます

- -

Apple の Safari の実装においては、<canvas> は <img> とほぼ同じような方法で実装された要素で、終了タグを持っていません。 しかしながら、<canvas> がウェブで広く普及するために、 代替内容のための何らかの方法を提供しなければなりません。 したがって、Mozilla の実装では、 終了タグが必須となっています。

- -

代替内容が必要無い場合、単純に <canvas id="foo" ...></canvas> とすれば、Safari は終了タグを無視し、 Safari と Mozilla の両方で完全に互換性を持つでしょう。

- -

もし代替内容が望まれるならば、(canvas だけが描画されるべき) Safari から代替内容を隠すために、そして(代替内容が表示されるべき) IE から canvas 自体を隠すためにいくつかの CSS のトリックを使わなければなりません。

- -

現在は canvas 要素の内容には代替コンテンツを配置するように仕様書で定められています。

- -

その他の機能

- -

canvas への Web コンテンツの描画

- -
この機能は Chrome 特権コードの実行時のみに存在します。通常の HTML ページでは許可されていません。理由についてはソースをお読みください。
- -

Mozilla の canvas は {{domxref("CanvasRenderingContext2D", "drawWindow()", "drawWindow()")}} メソッドで拡張できます。このメソッドは DOM window の中身のスナップショットを canvas に描画します。以下に例を示します。

- -
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
-
- -

上記の例では、現在のウィンドウの、左上から (0, 0, 100, 200) 座標にある四角形の中身を、黒色背景の canvas に描き込みます。 遅くなりますが、 "rgba(255, 255, 255, 0)" と色を指定すれば、透過背景の上に中身を描画することになります。

- -

このメソッドにより、隠し IFRAME に任意の内容 (たとえば、CSS でスタイル付けされた HTML テキストや SVG) を入れて、その内容を canvas に描画することも可能です。その場合、現在の変形にしたがって、拡大縮小・回転が行われます。

- -

Ted Mielczarek の tab preview 拡張では、 Web ページのサムネイルを提供するために chrome の中でこのテクニックを使われています。ソースコードを参照してみてください。

- -
注記: Using canvas.drawWindow() while handling a document's onload event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the MozAfterPaint event to successfully draw HTML content into a canvas on page load.
- -

関連情報

- - diff --git a/files/ja/web/api/canvas_api/tutorial/index.html b/files/ja/web/api/canvas_api/tutorial/index.html index e9a02da072..020947f514 100644 --- a/files/ja/web/api/canvas_api/tutorial/index.html +++ b/files/ja/web/api/canvas_api/tutorial/index.html @@ -2,72 +2,58 @@ title: Canvas チュートリアル slug: Web/API/Canvas_API/Tutorial tags: - - Canvas tutorial + - Canvas + - Graphics + - Guide - HTML - HTML5 - - 'HTML:Canvas' - - Tutorials + - Intermediate + - Web translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Canvas-tutorial-broken --- -

<canvas> はスクリプト(一般的に JavaScript) を使って図形を描くために使われる新しい HTML 要素です。例えば、グラフを描く、写真を合成する、または簡単な（またはあまり簡単ではない）アニメーションに使うことができます。右の画像は後でこのチュートリアルの中でみる <canvas> を実際に使った例です。

+
{{CanvasSidebar}}
-

<canvas> は Apple によって Mac OS X の Dashboard のために初めて導入され、後に Safari に実装されました。Firefox 1.5 のような Gecko 1.8 ベースのブラウザもこの新しい要素をサポートしてます。<canvas> 要素は HTML 5 としても知られる WhatWG Web applications 1.0 仕様の一部分です。

+
-

このチュートリアルでは、あなたの HTML ページに <canvas> 要素を導入する方法を説明します。提供された例は、<canvas> で出来ることの、いくつかの明確なアイデアを与え、それをあなた自身で実装できるようにするために使うことができます。

- -

始める前に

- -

<canvas> を使うことはとても難しいわけではありませんが、HTML と JavaScript の基本的な理解が必要です。

- -

上述のように、<canvas> 要素は全てのモダンブラウザでサポートされているわけではないため、例を見るには Firefox 1.5 か他の最近の Gecko ベースブラウザ、Opera 9、もしくは最近のバージョンの Safari が必要になるでしょう。

+
+

<canvas> 要素は、スクリプト (一般的に JavaScript) を使って図形を描くために使われる新しい HTML 要素です。例えば、グラフを描く、写真を合成する、または簡単な (またはあまり簡単ではない) アニメーションに使うことができます。このページの画像は後でこのチュートリアルの中でみる <canvas> を実際に使った例です。

+
-

このチュートリアルの一覧

+

このチュートリアルでは、2D グラフィックを描画するために <canvas> 要素を使用する方法を、基礎から説明します。提供する例は、 canvas で出来ることの、いくつかの明確なアイデアと、それを自分自身のコンテンツで作成開始できるようなコードスニペットを提供します。

-
    -
  1. 基本的な使いかた
    2. -
  2. 図形を描く
    3. -
  3. 画像を使う
    4. -
  4. スタイルと色を適用する
    5. -
  5. 変形
    6. -
  6. 合成
    7. -
  7. 基本的なアニメーション
    8. -
  8. canvasの最適化
    9. -
+

Apple が OS X Dashboard のために WebKit に初めて導入した後、 <canvas> はブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。

-

関連情報

+

始める前に

-
    -
  1. Canvas トピックのページ
    2. -
  2. canvas を使って図形を描く
    3. -
  3. Canvas の実例
    4. -
  4. canvas への文字の描画
    5. -
+

<canvas> を使うことはそれほど難しくはありませんが、HTML と JavaScript の基本的な理解が必要です。一部の古いブラウザーは <canvas> 要素をサポートしていませんが、最近のバージョンの主要ブラウザーはすべてサポートしています。canvas の既定のサイズは、300 px × 150 px (幅 × 高さ) です。しかし、HTML の height および width プロパティを使用して、独自のサイズを定義することができます。canvas にグラフィックを描画するためには、JavaScript コンテキストオブジェクトを使用します。このオブジェクトは、グラフィックをその場で生成します。

-

canvas に関する外部情報（日本語）

+

チュートリアル

-

canvas に関する外部情報（英語）

+

関連情報

-
-
-
{{Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage")}}
+

貢献者への注記

+ +

2013 年 6 月 17 日の週に発生した不運な技術的エラーにより、すべての過去の貢献者の属性を含む、このチュートリアルの履歴情報が失われました。この問題についておわびするとともに、この不運な事故を容赦願います。

+ +
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
-- cgit v1.2.3-54-g00ecf