From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:43:23 -0500
Subject: initial commit

---
 .../tutorial/optimizing_canvas/index.html          | 26 ++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 files/zh-tw/web/api/canvas_api/tutorial/optimizing_canvas/index.html

(limited to 'files/zh-tw/web/api/canvas_api/tutorial/optimizing_canvas')

diff --git a/files/zh-tw/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/zh-tw/web/api/canvas_api/tutorial/optimizing_canvas/index.html
new file mode 100644
index 0000000000..7fb8b35666
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/optimizing_canvas/index.html
@@ -0,0 +1,26 @@
+---
+title: 最佳化canvas
+slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+---
+<p>{{HTMLElement("canvas")}}在網頁2D繪圖上被大量運用於遊戲和複雜視覺化效果上。隨著繪圖複雜度越來越高，效能問題也會逐一浮現，所以最後我們在這邊列出一些最佳化畫布的方法，避免一些效能問題:</p>
+<ul>
+  <li>
+    在畫面之外的畫布上先行渲染相似或重複的物件
+  </li>
+  <li>批次性執行繪圖，例如一次畫數個線條而非分開一次一次畫</li>
+  <li>
+   使用整數位座標值，盡量避免小數點值
+  </li>
+  <li>避免不必要的畫布狀態改變</li>
+  <li>
+    只渲染不同處，不要全部重新渲染
+  </li>
+  <li>對於複雜需求可以利用多個畫布分層構成</li>
+  <li>
+    盡量不要用shadowBlur屬性
+  </li>
+  <li>使用{{domxref("window.requestAnimationFrame()")}}</li>
+  <li>用<a href="http://jsperf.com" title="http://jsperf.com">JSPerf</a>測試效能</li>
+</ul>
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}</p>
-- 
cgit v1.2.3-54-g00ecf