blob: e9a02da072807f2b345223c3a44ce86a1087c142 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
---
title: Canvas チュートリアル
slug: Web/API/Canvas_API/Tutorial
tags:
- Canvas tutorial
- HTML
- HTML5
- 'HTML:Canvas'
- Tutorials
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>
<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>
<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>
<h2 id="In_this_tutorial" name="In_this_tutorial">このチュートリアルの一覧</h2>
<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>
<h2 id="See_also" name="See_also">関連情報</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>
<h3 id="canvas_に関する外部情報（日本語）">canvas に関する外部情報（日本語）</h3>
<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>
</ul>
<h3 id="canvas_に関する外部情報（英語）">canvas に関する外部情報（英語）</h3>
<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>
</ul>
</div>
<div>{{Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage")}}</div>
|
