diff options
| -rw-r--r-- | files/ja/_redirects.txt | 12 | ||||
| -rw-r--r-- | files/ja/_wikihistory.json | 25 | ||||
| -rw-r--r-- | files/ja/conflicting/web/api/canvas_api/tutorial/index.html | 61 | ||||
| -rw-r--r-- | files/ja/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html | 214 | ||||
| -rw-r--r-- | files/ja/web/api/canvas_api/tutorial/index.html | 86 |
5 files changed, 44 insertions, 354 deletions
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 ---- -<div>{{CanvasSidebar}}</div> - -<div><a href="/ja/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></div> - -<div class="summary"> -<p><a href="/ja/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> 要素は、スクリプト (一般的に <a href="/ja/docs/Glossary/JavaScript" title="JavaScript">JavaScript</a>) を使って図形を描くために使われる新しい <a href="/ja/docs/Web/HTML" title="HTML">HTML</a> 要素です。例えば、グラフを描く、写真を合成する、または簡単な (または<a href="/ja/docs/Web/API/Canvas_API/A_basic_ray-caster" title="A_Basic_RayCaster">あまり簡単ではない</a>) アニメーションに使うことができます。このページの画像は後でこのチュートリアルの中でみる <a href="/ja/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> を実際に使った例です。</p> -</div> - -<p><span class="seoSummary">このチュートリアルでは、2D グラフィックスを描画するために <code><canvas></code> 要素を使用する方法を、基礎から説明します。提供する例は、<code><canvas></code> で出来ることの、いくつかの明確なアイデアと、それをあなた自身のコンテンツで作成開始できるようなコードスニペットを提供します。</span></p> - -<p><code><canvas></code> は Apple によって OS X の Dashboard のために WebKit へ初めて導入され、後にブラウザーに実装されました。現在は、あらゆる主要ブラウザーがサポートしています。</p> - -<h2 id="Before_you_start" name="Before_you_start">始める前に</h2> - -<p><code><canvas></code> を使うことはそれほど難しくはありませんが、<a href="/ja/docs/Web/HTML">HTML</a> と <a href="/ja/docs/Web/JavaScript">JavaScript</a> の基本的な理解が必要です。一部の古いブラウザーは <code><canvas></code> 要素をサポートしていませんが、最近のバージョンの主要ブラウザーはすべてサポートしています。canvas のデフォルトのサイズは、300 px × 150 px (幅 × 高さ) です。しかし、HTML の <code>height</code> および <code>width</code> プロパティを使用して、独自のサイズを定義することができます。canvas にグラフィックスを描画するためには、JavaScript コンテキストオブジェクトを使用します。このオブジェクトは、グラフィックスをオンザフライで生成します。</p> - -<h2 id="In_this_tutorial" name="In_this_tutorial">チュートリアル</h2> - -<ul> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="HTML/Canvas/Tutorial/Basic_usage">基本的な使い方</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="HTML/Canvas/Tutorial/Drawing_shapes">図形を描く</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="HTML/Canvas/Tutorial/Applying_styles_and_colors">スタイルと色を適用する</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text">文字の描画</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Using_images" title="HTML/Canvas/Tutorial/Using_images">画像を使う</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Transformations" title="HTML/Canvas/Tutorial/Transformations">変形</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Compositing" title="HTML/Canvas/Tutorial/Compositing">合成とクリッピング</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="HTML/Canvas/Tutorial/Basic_animations">基本的なアニメーション</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">高度なアニメーション</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">ピクセル操作</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">ヒット領域とアクセシビリティ</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML/Canvas/Tutorial/Optimizing_canvas">canvas を最適化する</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Finale">最後に</a></li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas トピックのページ</a></li> - <li><a href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li> - <li><a href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> -</ul> - -<h2 id="A_note_to_contributors" name="A_note_to_contributors">貢献者への注記</h2> - -<p>2013 年 6 月 17 日の週に発生した不運な技術的エラーにより、すべての過去の貢献者の属性を含む、このチュートリアルの履歴情報が失われました。この問題についておわびするとともに、この不運な事故を容赦願います。</p> - -<div>{{Next("Web/API/Canvas_API/Tutorial/Basic_usage")}}</div> 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 ---- -<div class="note"> -<p>このページには、一部古い内容が含まれています。</p> -</div> - -<h2 id="Introduction" name="Introduction">イントロダクション</h2> - -<p><a href="ja/Firefox_1.5">Firefox 1.5</a> より、 Firefox はプログラム可能な画像のための新しい HTML 要素を含みます。<code><canvas></code> は <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG の canvas の仕様</a>を基にしています。WhatWG canvas 仕様自体は Safari で実装された Apple の <code><canvas></code> を基にしています。クライアント上でグラフ、UI 要素、および他のカスタムグラフィックスの描画に使用することができます。</p> - -<p><code><canvas></code> は 1 つ以上の<em>描画コンテクスト</em> を公開した固定サイズの描画表面を作ります。現在は 2 次元描画コンテクストのみが実装されています。 3D グラフィックスの描画には、 <a href="/ja/docs/WebGL" title="https://developer.mozilla.org/en/WebGL">WebGL レンダリングコンテクスト</a>を用いると良いでしょう。</p> - -<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">2 次元描画コンテクスト</h2> - -<h3 id="A_Simple_Example" name="A_Simple_Example">初歩的な例</h3> - -<p>始めに、2 つの交差した長方形を描く簡単な例を見てみましょう。片方の長方形は透明度を持っています。</p> - -<pre class="brush: js">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); -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="120" height="120"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<div>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</div> - -<p><code>draw</code> 関数は、まず <code>canvas</code> 要素を取得し、次にその <code>canvas</code> 要素 の 2 次元レンダリングコンテクストを取得しています。 <code>ctx</code> オブジェクトは canvas に実際に描画するのに使うことができます。例では CSS color 仕様による 2 つの異なる色を <code>fillStyle</code> プロパティで設定し、<code>fillRect</code> メソッドにより 2 つの長方形を単純に塗りつぶしています。 2 つ目の <code>fillStyle</code> は色と一緒に透明度を定義するために <code>rgba()</code> を使っています。</p> - -<p><code>fillRect()</code> は矩形状の塗りつぶし、<code>strokeRect()</code> は矩形状の輪郭線の描画、 <code>clearRect()</code> はコンテクストの指定部分の消去に用います。より複雑な形を描画するにはパスを用います。</p> - -<h3 id="Using_Paths" name="Using_Paths">パスの利用</h3> - -<p><code>beginPath</code> メソッドは新しいパスの作成を開始します。そして <code>moveTo</code>、<code>lineTo</code>、<code>arcTo</code>、<code>arc</code> などのメソッドはパスにセグメントを加えるのに使われます。パスは <code>closePath</code> メソッドによって閉じることが可能です。パスの作成後、<code>fill</code> か <code>stroke</code> を使って <code>canvas</code> コンテクストにパスを描画します。</p> - -<pre class="brush: js">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(); -}</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="160" height="160"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<div>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</div> - -<p><code>fill()</code> か <code>stroke()</code> を呼ぶと現在のパスが使われます。 もう一度塗りつぶしか輪郭線を描くにはパスを再作成しなくてはなりません。</p> - -<h3 id="Graphics_State" name="Graphics_State">レンダリングコンテクストの状態</h3> - -<p><code>fillStyle</code> 、<code>strokeStyle</code> 、<code>lineWidth</code> 、 <code>lineJoin</code> のようなコンテクストの属性は、現在のレンダリングコンテクストの状態の一部です。 コンテクストは現在の状態を状態スタックに格納したり取り出したりするために <code>save()</code> と <code>restore()</code> という 2 つのメソッドを提供してます。</p> - -<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">より複雑な例</h3> - -<p>パス、状態、変換行列を用いた少し複雑な例を紹介します。 <code>translate()</code> 、<code>scale()</code> 、<code>rotate()</code> のコンテクストメソッドは全て現在の行列を変換します。 全ての描画された点は最初にこの行列により変換されます。</p> - -<pre class="brush: js">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(); -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="185" height="185"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<div>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</div> - -<p><code>drawBotie</code> 関数及び <code>dot</code> 関数を定義し、 draw 関数内で 4 回使用しています。 それぞれを呼び出す前に、<code>translate()</code> 及び <code>rotate()</code> を現在の変換行列を用意するために用いています。その変換行列は順番に点と蝶ネクタイを配置します。 <code>dot</code> 関数は <code>(0, 0)</code> を中心に小さな黒い正方形を描画します。 dot は変換行列によって移動されます。 <code>drawBowtie</code> は第 1 引数に指定した塗りつぶしスタイルを使い、単純な蝶ネクタイのパスを描画します。</p> - -<p>行列の操作は累積されるので、<code>save()</code> 及び <code>restore()</code> はそれぞれが設定した元の canvas の状態に復帰するために使われます。 注目すべきは、回転が常に現在の基点の周りで起こるということです。 従って <code>translate() rotate() translate() </code> の連続は <code>translate() translate() rotate()</code> の連続実行とは異なった結果を生みます。</p> - -<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Apple の <canvas> との互換性</h2> - -<p><code><canvas></code> は Apple の実装とその他の実装で互換性があります。 しかし、いくつかの注意すべき問題があります。</p> - -<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">必須の <code></canvas></code> タグ <span style="font-size: smaller; font-weight: normal;">このセクションの内容には古い情報が含まれます</span></h3> - -<p>Apple の Safari の実装においては、<code><canvas></code> は <code><img></code> とほぼ同じような方法で実装された要素で、終了タグを持っていません。 しかしながら、<code><canvas></code> がウェブで広く普及するために、 代替内容のための何らかの方法を提供しなければなりません。 したがって、Mozilla の実装では、 終了タグが必須となっています。</p> - -<p>代替内容が必要無い場合、単純に <code><canvas id="foo" ...></canvas></code> とすれば、Safari は終了タグを無視し、 Safari と Mozilla の両方で完全に互換性を持つでしょう。</p> - -<p>もし代替内容が望まれるならば、(canvas だけが描画されるべき) Safari から代替内容を隠すために、そして(代替内容が表示されるべき) IE から canvas 自体を隠すためにいくつかの CSS のトリックを使わなければなりません。</p> - -<p>現在は canvas 要素の内容には代替コンテンツを配置するように仕様書で定められています。</p> - -<h2 id="Additional_Features" name="Additional_Features">その他の機能</h2> - -<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">canvas への Web コンテンツの描画</h3> - -<div class="note">この機能は Chrome 特権コードの実行時のみに存在します。通常の HTML ページでは許可されていません。<a class="external" href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2345">理由についてはソースをお読みください</a>。</div> - -<p>Mozilla の <code>canvas</code> は {{domxref("CanvasRenderingContext2D", "drawWindow()", "drawWindow()")}} メソッドで拡張できます。このメソッドは DOM <code>window</code> の中身のスナップショットを canvas に描画します。以下に例を示します。</p> - -<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); -</pre> - -<p>上記の例では、現在のウィンドウの、左上から (0, 0, 100, 200) 座標にある四角形の中身を、黒色背景の canvas に描き込みます。 遅くなりますが、 "rgba(255, 255, 255, 0)" と色を指定すれば、透過背景の上に中身を描画することになります。</p> - -<p>このメソッドにより、隠し IFRAME に任意の内容 (たとえば、CSS でスタイル付けされた HTML テキストや SVG) を入れて、その内容を canvas に描画することも可能です。その場合、現在の変形にしたがって、拡大縮小・回転が行われます。</p> - -<p>Ted Mielczarek の <a class="external" href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> 拡張では、 Web ページのサムネイルを提供するために chrome の中でこのテクニックを使われています。ソースコードを参照してみてください。</p> - -<div class="note"><strong>注記:</strong> Using <code>canvas.drawWindow()</code> while handling a document's <code>onload</code> event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the <a href="/ja/docs/Gecko-Specific_DOM_Events#MozAfterPaint" title="Gecko-Specific DOM Events#MozAfterPaint"><code>MozAfterPaint</code></a> event to successfully draw HTML content into a canvas on page load.</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/HTML/Canvas" title="HTML/Canvas">Canvas トピックページ</a></li> - <li><a href="/ja/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas チュートリアル</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG 仕様</a></li> - <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> - <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> - <li><a href="/ja/docs/tag/canvas_examples">いくつかの使用例</a> : - <ul> - <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> - <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> - <li><a href="/ja/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li> - <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> - <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li> - </ul> - </li> - <li><a href="/ja/docs/tag/canvas">その他...</a></li> -</ul> 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 --- -<p><strong><code><a href="/ja/docs/HTML/Canvas" title="HTML/Canvas"><canvas></a></code></strong> はスクリプト(一般的に <a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a>) を使って図形を描くために使われる新しい <a href="/ja/docs/HTML" title="HTML">HTML</a> 要素です。例えば、グラフを描く、写真を合成する、または簡単な（または<a href="/ja/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">あまり簡単ではない</a>）アニメーションに使うことができます。右の画像は後でこのチュートリアルの中でみる <code><canvas></code> を実際に使った例です。</p> +<div>{{CanvasSidebar}}</div> -<p><code><canvas></code> は Apple によって <a href="http://www.apple.com/jp/macosx/features/dashboard/">Mac OS X の Dashboard</a> のために初めて導入され、後に Safari に実装されました。Firefox 1.5 のような <a href="/ja/docs/Gecko" title="Gecko">Gecko</a> 1.8 ベースのブラウザもこの新しい要素をサポートしてます。<code><canvas></code> 要素は HTML 5 としても知られる <a href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> 仕様の一部分です。</p> +<div><a href="/ja/docs/Web/API/Canvas_API"><img alt="" src="canvas_tut_examples.jpg" style="float: right; margin-left: 10px; margin-right: 10px;"></a></div> -<p>このチュートリアルでは、あなたの HTML ページに <code><canvas></code> 要素を導入する方法を説明します。提供された例は、<code><canvas></code> で出来ることの、いくつかの明確なアイデアを与え、それをあなた自身で実装できるようにするために使うことができます。</p> - -<h2 id="Before_you_start" name="Before_you_start">始める前に</h2> - -<p><code><canvas></code> を使うことはとても難しいわけではありませんが、<a href="/ja/docs/HTML" title="HTML">HTML</a> と <a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a> の基本的な理解が必要です。</p> - -<p>上述のように、<code><canvas></code> 要素は全てのモダンブラウザでサポートされているわけではないため、例を見るには Firefox 1.5 か他の最近の Gecko ベースブラウザ、Opera 9、もしくは最近のバージョンの Safari が必要になるでしょう。</p> +<div class="summary"> +<p><a href="/ja/docs/Web/HTML/Element/canvas"><strong><code><canvas></code></strong></a> 要素は、スクリプト (一般的に <a href="/ja/docs/Glossary/JavaScript">JavaScript</a>) を使って図形を描くために使われる新しい <a href="/ja/docs/Web/HTML">HTML</a> 要素です。例えば、グラフを描く、写真を合成する、または簡単な (または<a href="/ja/docs/Web/API/Canvas_API/A_basic_ray-caster">あまり簡単ではない</a>) アニメーションに使うことができます。このページの画像は後でこのチュートリアルの中でみる <a href="/ja/docs/Web/HTML/Element/canvas"><strong><code><canvas></code></strong></a> を実際に使った例です。</p> +</div> -<h2 id="In_this_tutorial" name="In_this_tutorial">このチュートリアルの一覧</h2> +<p><span class="seoSummary">このチュートリアルでは、2D グラフィックを描画するために <code><canvas></code> 要素を使用する方法を、基礎から説明します。提供する例は、 canvas で出来ることの、いくつかの明確なアイデアと、それを自分自身のコンテンツで作成開始できるようなコードスニペットを提供します。</span></p> -<ol> - <li><a href="/ja/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">基本的な使いかた</a></li> - <li><a href="/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">図形を描く</a></li> - <li><a href="/ja/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">画像を使う</a></li> - <li><a href="/ja/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">スタイルと色を適用する</a></li> - <li><a href="/ja/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">変形</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">合成</a></li> - <li><a href="/ja/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">基本的なアニメーション</a></li> - <li><a href="/ja/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="Canvas_tutorial/Optimizing_canvas">canvasの最適化</a></li> -</ol> +<p>Apple が OS X Dashboard のために WebKit に初めて導入した後、 <code><canvas></code> はブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="Before_you_start">始める前に</h2> -<ol> - <li><a href="/ja/docs/HTML/Canvas" title="HTML/Canvas">Canvas トピックのページ</a></li> - <li><a href="/ja/docs/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">canvas を使って図形を描く</a></li> - <li><a href="/ja/docs/tag/Canvas_examples" title="/ja/docs/tag/Canvas_examples">Canvas の実例</a></li> - <li><a href="/ja/docs/Drawing_text_using_a_canvas" title="Special:Tags?tag=Canvas_text&language=ja">canvas への文字の描画</a></li> -</ol> +<p><code><canvas></code> を使うことはそれほど難しくはありませんが、<a href="/ja/docs/Web/HTML">HTML</a> と <a href="/ja/docs/Web/JavaScript">JavaScript</a> の基本的な理解が必要です。一部の古いブラウザーは <code><canvas></code> 要素をサポートしていませんが、最近のバージョンの主要ブラウザーはすべてサポートしています。canvas の既定のサイズは、300 px × 150 px (幅 × 高さ) です。しかし、HTML の <code>height</code> および <code>width</code> プロパティを使用して、独自のサイズを定義することができます。canvas にグラフィックを描画するためには、JavaScript コンテキストオブジェクトを使用します。このオブジェクトは、グラフィックをその場で生成します。</p> -<h3 id="canvas_に関する外部情報（日本語）">canvas に関する外部情報（日本語）</h3> +<h2 id="In_this_tutorial">チュートリアル</h2> <ul> - <li><a href="http://www.html5.jp/canvas/ref.html" title="Canvasリファレンス - HTML5.JP">Canvasリファレンス - HTML5.JP</a></li> - <li><a href="http://jsdo.it/tag/canvas?search_order=favorite" title="canvas - jsdo.it - Share JavaScript, HTML5 and CSS">canvas - jsdo.it - Share JavaScript, HTML5 and CSS</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_usage">基本的な使い方</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">図形を描く</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">スタイルと色を適用する</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text">文字の描画</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Using_images">画像を使う</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Transformations">変形</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Compositing">合成とクリッピング</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations">基本的なアニメーション</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">高度なアニメーション</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">ピクセル操作</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">ヒット領域とアクセシビリティ</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas">canvas を最適化する</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Finale">最後に</a></li> </ul> -<h3 id="canvas_に関する外部情報（英語）">canvas に関する外部情報（英語）</h3> +<h2 id="See_also">関連情報</h2> -<div class="cols-2"> <ul> - <li><a href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 Tutorial</a></li> - <li><a href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="en/Adding Text to Canvas">Adding Text to Canvas</a></li> - <li><a href="http://www.canvasdemos.com/" title="Canvas Demos">Canvas Demos - Games, applications, tools and tutorials</a></li> - <li><a class="link-https" href="https://sites.google.com/site/canvasdraw/" title="https://sites.google.com/site/canvasdraw/">Canvas Drawing Tool</a></li> - <li><a href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas Animation Application</a></li> - <li><a href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">interactive canvas tutorial</a></li> - <li><a href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas Cheat Sheet with all attributes and methods</a></li> - <li><a href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li> - <li><a href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> - <li><a href="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api" title="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api">How to draw a point with the Canvas API</a></li> - <li><a href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">How to draw N grade Bézier curves with the Canvas API</a></li> - <li><a href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API">Canvas トピックのページ</a></li> + <li><a href="https://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> </ul> -</div> -<div>{{Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage")}}</div> +<h2 id="A_note_to_contributors">貢献者への注記</h2> + +<p>2013 年 6 月 17 日の週に発生した不運な技術的エラーにより、すべての過去の貢献者の属性を含む、このチュートリアルの履歴情報が失われました。この問題についておわびするとともに、この不運な事故を容赦願います。</p> + +<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div> |