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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: Canvas API
slug: Web/API/Canvas_API
translation_of: Web/API/Canvas_API
---
<div>{{CanvasSidebar}}</div>
<p class="summary"><strong>{{HTMLElement("canvas")}}</strong> 是 <a href="/zh-TW/docs/HTML" title="HTML">HTML5</a> 的新元素，可透過 Script（通常是 <a href="/zh-TW/docs/JavaScript" title="JavaScript">JavaScript</a>）繪製圖形。例如，可以用來繪圖、合成圖照片、建立動畫、甚至處理即時的影片播放。</p>
<p>Mozilla 應用程式從 Gecko 1.8（也就是 <a href="/en/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">Firefox 1.5</a>）起開始支援 <code><canvas></code>。這個元素最初由蘋果 OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> 和 Safari 引入。Internet Explorer 9 以上版本也有支援<code> <canvas></code>，但較舊的 IE 版本則須嵌入 Google <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a> 專案中的程式腳本，才能得到有效的支援。Opera 9 也支援 <code><canvas></code>。</p>
<p><code><canvas></code> 元素通常也被 <a href="/zh-TW/docs/Web/WebGL">WebGL</a> 用來在網頁上顯示使用硬體加速繪製的 3D 圖形。</p>
<h2 id="範例">範例</h2>
<p>這則簡單的範例使用了{{domxref("CanvasRenderingContext2D.fillRect()")}}這個方法。</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
</pre>
<p>Edit the code below and see your changes update live in the canvas:</p>
<div class="hidden">
<h6 id="Playable_code">Playable code</h6>
<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);</textarea>
</pre>
<pre class="brush: js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
<h2 id="參考">參考</h2>
<div class="index">
<ul>
<li>{{domxref("HTMLCanvasElement")}}</li>
<li>{{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasGradient")}}</li>
<li>{{domxref("CanvasPattern")}}</li>
<li>{{domxref("ImageBitmap")}}</li>
<li>{{domxref("ImageData")}}</li>
<li>{{domxref("TextMetrics")}}</li>
<li>{{domxref("Path2D")}} {{experimental_inline}}</li>
</ul>
</div>
<p>這些與<code>WebGLRenderingContext</code>有關的標識，皆引用在<a href="/zh-TW/docs/Web/WebGL" title="/zh-TW/docs/Web/WebGL">WebGL</a></p>
<h2 id="教程指南">教程指南</h2>
<dl>
<dt><a href="/zh-TW/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt>
<dd>這個全部的課程包含 <code><canvas></code> 基礎的使用和高階的應用。</dd>
<dt><a href="/zh-TW/Add-ons/Code_snippets/Canvas">Code snippets: Canvas</a></dt>
<dd>一些延伸的開發功能，包含<code><canvas></code>。</dd>
<dt><a href="/zh-TW/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt>
<dd>使用<code><canvas></code>做的光線追蹤(ray-tracing )範例。</dd>
<dt><a href="/zh-TW/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Drawing DOM objects into a canvas</a></dt>
<dd>如何在 DOM<code><canvas></code>之中，畫個物件。例如 HTML的元素。</dd>
<dt><a href="/zh-TW/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></dt>
<dd>結合{{HTMLElement("video")}} 和 {{HTMLElement("canvas")}} 去控制影像資料的真實時間</dd>
</dl>
<h2 id="資源">資源</h2>
<h3 id="Generic">Generic</h3>
<ul>
<li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li>
<li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a></li>
</ul>
<h3 id="Libraries">Libraries</h3>
<ul>
<li><a href="http://fabricjs.com">Fabric.js</a> is an open-source canvas library with SVG parsing capabilities.</li>
<li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> is an open-source canvas library focused on interactivity for desktop and mobile applications.</li>
<li><a href="http://paperjs.org/">Paper.js</a> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.</li>
<li><a href="http://origamijs.com/docs/">Origami.js</a> is an open source lightweight canvas library.</li>
<li><a href="http://libcanvas.github.com/">libCanvas</a> 是一個強大且輕量化的 canvas 框架。</li>
<li><a href="http://processingjs.org">Processing.js</a> 是視覺化程式語言 Processing 的移植版。</li>
<li><a href="https://playcanvas.com/">PlayCanvas</a> is an open source game engine.</li>
<li><a href="http://www.pixijs.com/">Pixi.js</a> is an open source game engine.</li>
<li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> 是一個製作圖表和圖形的函式庫。</li>
<li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> 是一個用來控制動畫影格的 Canvas API。</li>
<li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> 是一個可應用在資料視覺化、遊戲開發的 WebGL 框架。</li>
<li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> 可在網頁上建立 2D 的互動式 Canvas 視覺化資料。</li>
<li><a href="http://www.createjs.com/easeljs">EaselJS</a> 是一個自由 / 開放源始碼的函式庫，目的在簡化 canvas 於遊戲與美術的開發難度，類似 Flash API。</li>
<li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> is another open-source javascript library for creating and manipulating 2d canvas elements</li>
</ul>
<h2 id="規範">規範</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="參見">參見</h2>
<ul>
<li><a href="/zh-TW/docs/Web/WebGL">WebGL</a></li>
</ul>
|
