From d62c8afe56395e9e793dab0f629b2a1694449c82 Mon Sep 17 00:00:00 2001 From: t7yang Date: Tue, 22 Jun 2021 23:06:54 +0800 Subject: remove deprecated $sample URLs for zh --- .../adding_vector_graphics_to_the_web/index.html | 2 +- files/zh-cn/mdn/structures/live_samples/index.html | 2 +- .../api/detecting_device_orientation/index.html | 4 +- .../zh-cn/web/api/datatransfer/getdata/index.html | 2 +- .../api/document/readystatechange_event/index.html | 2 +- files/zh-cn/web/api/domtokenlist/index.html | 4 +- .../web/api/element/mouseout_event/index.html | 2 +- .../api/htmlelement/beforeinput_event/index.html | 2 +- .../web/api/htmlelement/input_event/index.html | 2 +- .../htmlinputelement/setselectionrange/index.html | 2 +- .../api/htmlselectelement/selectedindex/index.html | 2 +- files/zh-cn/web/api/mouseevent/screenx/index.html | 2 +- files/zh-cn/web/api/mouseevent/screeny/index.html | 2 +- .../web/api/range/selectnodecontents/index.html | 2 +- .../web/api/range/surroundcontents/index.html | 2 +- .../web/html/element/img/clock-demo-200px.png | Bin 0 -> 90575 bytes .../web/html/element/img/clock-demo-400px.png | Bin 0 -> 90575 bytes files/zh-cn/web/html/element/img/favicon144.png | Bin 0 -> 3086 bytes files/zh-cn/web/html/element/img/favicon72.png | Bin 0 -> 2061 bytes files/zh-cn/web/html/element/img/index.html | 16 +- files/zh-cn/web/html/element/input/index.html | 44 +-- .../tutorial/compositing/canvas_clip.png | Bin 0 -> 3088 bytes .../tutorial/compositing/canvas_clipping_path.png | Bin 0 -> 2937 bytes .../tutorial/compositing/example/index.html | 294 +++++++++++++++++++++ .../api/canvas_api/tutorial/compositing/index.html | 8 +- 25 files changed, 347 insertions(+), 49 deletions(-) create mode 100644 files/zh-cn/web/html/element/img/clock-demo-200px.png create mode 100644 files/zh-cn/web/html/element/img/clock-demo-400px.png create mode 100644 files/zh-cn/web/html/element/img/favicon144.png create mode 100644 files/zh-cn/web/html/element/img/favicon72.png create mode 100644 files/zh-tw/web/api/canvas_api/tutorial/compositing/canvas_clip.png create mode 100644 files/zh-tw/web/api/canvas_api/tutorial/compositing/canvas_clipping_path.png create mode 100644 files/zh-tw/web/api/canvas_api/tutorial/compositing/example/index.html diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html index 3b292c1b9c..c691545f24 100644 --- a/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ b/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -70,7 +70,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_th <circle cx="150" cy="100" r="90" fill="blue" /> </svg> -

这将创建以下输出：(如果无法查看图片，这里)

+

这将创建以下输出：

{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}

diff --git a/files/zh-cn/mdn/structures/live_samples/index.html b/files/zh-cn/mdn/structures/live_samples/index.html index 0b50a1b8f7..f5e03c47ef 100644 --- a/files/zh-cn/mdn/structures/live_samples/index.html +++ b/files/zh-cn/mdn/structures/live_samples/index.html @@ -28,7 +28,7 @@ translation_of: MDN/Structures/Live_samples
  • 如果这个编号属于一个行级元素，该集合将包含本行级元素之后到下个同级行级元素之前的所有代码。请注意，子元素下的代码块也会被包含，如果不希望这样的效果，可以使用块级元素的id。
    • -

    宏使用一个特殊的 URL 来取得一个分组中的代码示例：http://url-of-page$samples/group-id。 group-id 指代码所在行级或者块级元素的id。用来展示运行结果的框架(或页面)会运行在沙盒中，在安全条件下实现任何想在网络上实现的功能。当然，在实践中，代码需要针对于包含它的页面，否则会被社区编辑移除。

    +

    宏使用一个特殊的 URL 来取得一个分组中的代码示例：https://url-of-page_samples_/group-id。 group-id 指代码所在行级或者块级元素的id。用来展示运行结果的框架(或页面)会运行在沙盒中，在安全条件下实现任何想在网络上实现的功能。当然，在实践中，代码需要针对于包含它的页面，否则会被社区编辑移除。

    注意：必须使用宏来展示运行实例的输出。为保安全，MDN 编辑器将会移除直接使用 <iframe> 标签的地方。

    diff --git a/files/zh-cn/orphaned/web/api/detecting_device_orientation/index.html b/files/zh-cn/orphaned/web/api/detecting_device_orientation/index.html index 84bf547bc9..ac781aa185 100644 --- a/files/zh-cn/orphaned/web/api/detecting_device_orientation/index.html +++ b/files/zh-cn/orphaned/web/api/detecting_device_orientation/index.html @@ -230,9 +230,9 @@ window.输出结果:

    -

    在这里以新窗口打开此示例；因为有些浏览器中的 {{event("deviceorientation")}} 事件不支持跨域。

    +

    在{{LiveSampleLink("Orientation_example", "这里")}}以新窗口打开此示例；因为有些浏览器中的 {{event("deviceorientation")}} 事件不支持跨域。

    -

    +
    {{EmbedLiveSample('Orientation_example', '230', '260')}}

    警告: Chrome 和 Firefox 处理角度的机制不同，所以某些轴上的方向是相反的。

    diff --git a/files/zh-cn/web/api/datatransfer/getdata/index.html b/files/zh-cn/web/api/datatransfer/getdata/index.html index 6e8916bb16..49de150341 100644 --- a/files/zh-cn/web/api/datatransfer/getdata/index.html +++ b/files/zh-cn/web/api/datatransfer/getdata/index.html @@ -78,7 +78,7 @@ function drop(dropevent) {

    结果

    -

    +

    {{ EmbedLiveSample('Example', 600) }}

    说明

    diff --git a/files/zh-cn/web/api/document/readystatechange_event/index.html b/files/zh-cn/web/api/document/readystatechange_event/index.html index 769a0cd3c5..7a79b32769 100644 --- a/files/zh-cn/web/api/document/readystatechange_event/index.html +++ b/files/zh-cn/web/api/document/readystatechange_event/index.html @@ -111,7 +111,7 @@ document.addEventListener('DOMContentLoaded', (event) => {

    结果

    -

    +

    {{ EmbedLiveSample('Live_example', '100%', '160px') }}

    规范

    diff --git a/files/zh-cn/web/api/domtokenlist/index.html b/files/zh-cn/web/api/domtokenlist/index.html index e67bee5432..2b3fc0f336 100644 --- a/files/zh-cn/web/api/domtokenlist/index.html +++ b/files/zh-cn/web/api/domtokenlist/index.html @@ -66,7 +66,7 @@ para.textContent = `paragraph classList is "${classes}"`;

    输出类似这样:

    -

    +

    {{ EmbedLiveSample('Examples', '100%', 60) }}

    去除空格和重复项目

    @@ -81,7 +81,7 @@ span.textContent = `span classList is "${classes}"`;

    输出类似这样：

    -

    +

    {{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}

    diff --git a/files/zh-cn/web/api/element/mouseout_event/index.html b/files/zh-cn/web/api/element/mouseout_event/index.html index f77a4e8162..c964492f39 100644 --- a/files/zh-cn/web/api/element/mouseout_event/index.html +++ b/files/zh-cn/web/api/element/mouseout_event/index.html @@ -85,7 +85,7 @@ test.addEventListener("mouseout", function( event ) {

    结果

    -

    +

    {{EmbedLiveSample("mouseout_and_mouseleave", 640, 200)}}

    规范

    diff --git a/files/zh-cn/web/api/htmlelement/beforeinput_event/index.html b/files/zh-cn/web/api/htmlelement/beforeinput_event/index.html index fa11a7588c..c67e364cb9 100644 --- a/files/zh-cn/web/api/htmlelement/beforeinput_event/index.html +++ b/files/zh-cn/web/api/htmlelement/beforeinput_event/index.html @@ -71,7 +71,7 @@ function updateValue(e) {

    结果

    -

    +

    {{EmbedLiveSample("Simple_logger")}}

    规范

    diff --git a/files/zh-cn/web/api/htmlelement/input_event/index.html b/files/zh-cn/web/api/htmlelement/input_event/index.html index f2921d53e2..3108ca825d 100644 --- a/files/zh-cn/web/api/htmlelement/input_event/index.html +++ b/files/zh-cn/web/api/htmlelement/input_event/index.html @@ -68,7 +68,7 @@ function updateValue(e) {

    结果

    -

    +

    {{EmbedLiveSample("Examples")}}

    规范

    diff --git a/files/zh-cn/web/api/htmlinputelement/setselectionrange/index.html b/files/zh-cn/web/api/htmlinputelement/setselectionrange/index.html index 1dfc53223b..0d7070858d 100644 --- a/files/zh-cn/web/api/htmlinputelement/setselectionrange/index.html +++ b/files/zh-cn/web/api/htmlinputelement/setselectionrange/index.html @@ -65,7 +65,7 @@ translation_of: Web/API/HTMLInputElement/setSelectionRange

    结果

    -

    +

    {{EmbedLiveSample("Example")}}

    规范

    diff --git a/files/zh-cn/web/api/htmlselectelement/selectedindex/index.html b/files/zh-cn/web/api/htmlselectelement/selectedindex/index.html index 90217f241b..6e720db9b0 100644 --- a/files/zh-cn/web/api/htmlselectelement/selectedindex/index.html +++ b/files/zh-cn/web/api/htmlselectelement/selectedindex/index.html @@ -47,7 +47,7 @@ selectElem.addEventListener('change', function() { pElem.innerHTML = 'selectedIndex: ' + index; }) -

    +

    {{EmbedLiveSample("Example", "200px", "80px")}}

    规范

    diff --git a/files/zh-cn/web/api/mouseevent/screenx/index.html b/files/zh-cn/web/api/mouseevent/screenx/index.html index 1f3f484d14..05a83f9ba0 100644 --- a/files/zh-cn/web/api/mouseevent/screenx/index.html +++ b/files/zh-cn/web/api/mouseevent/screenx/index.html @@ -48,7 +48,7 @@ function logKey(e) {

    结果

    -

    +

    {{EmbedLiveSample("Example")}}

    规范

    diff --git a/files/zh-cn/web/api/mouseevent/screeny/index.html b/files/zh-cn/web/api/mouseevent/screeny/index.html index 4ae5210e23..4286534635 100644 --- a/files/zh-cn/web/api/mouseevent/screeny/index.html +++ b/files/zh-cn/web/api/mouseevent/screeny/index.html @@ -44,7 +44,7 @@ function logKey(e) {

    结果

    -

    +

    {{EmbedLiveSample("Example")}}

    规范

    diff --git a/files/zh-cn/web/api/range/selectnodecontents/index.html b/files/zh-cn/web/api/range/selectnodecontents/index.html index 6192db8697..fa583e3bb7 100644 --- a/files/zh-cn/web/api/range/selectnodecontents/index.html +++ b/files/zh-cn/web/api/range/selectnodecontents/index.html @@ -68,7 +68,7 @@ deselectButton.addEventListener('click', e => {

    结果

    -

    +

    {{EmbedLiveSample("Live_sample")}}

    规范

    diff --git a/files/zh-cn/web/api/range/surroundcontents/index.html b/files/zh-cn/web/api/range/surroundcontents/index.html index 58695a43f4..61304bd40b 100644 --- a/files/zh-cn/web/api/range/surroundcontents/index.html +++ b/files/zh-cn/web/api/range/surroundcontents/index.html @@ -45,7 +45,7 @@ range.surroundContents(newParent);

    结果

    -

    +

    {{EmbedLiveSample("Example")}}

    规范

    diff --git a/files/zh-cn/web/html/element/img/clock-demo-200px.png b/files/zh-cn/web/html/element/img/clock-demo-200px.png new file mode 100644 index 0000000000..999ad528fe Binary files /dev/null and b/files/zh-cn/web/html/element/img/clock-demo-200px.png differ diff --git a/files/zh-cn/web/html/element/img/clock-demo-400px.png b/files/zh-cn/web/html/element/img/clock-demo-400px.png new file mode 100644 index 0000000000..999ad528fe Binary files /dev/null and b/files/zh-cn/web/html/element/img/clock-demo-400px.png differ diff --git a/files/zh-cn/web/html/element/img/favicon144.png b/files/zh-cn/web/html/element/img/favicon144.png new file mode 100644 index 0000000000..e30b574b65 Binary files /dev/null and b/files/zh-cn/web/html/element/img/favicon144.png differ diff --git a/files/zh-cn/web/html/element/img/favicon72.png b/files/zh-cn/web/html/element/img/favicon72.png new file mode 100644 index 0000000000..db68260ca1 Binary files /dev/null and b/files/zh-cn/web/html/element/img/favicon72.png differ diff --git a/files/zh-cn/web/html/element/img/index.html b/files/zh-cn/web/html/element/img/index.html index a1f6530952..fef8ea66e5 100644 --- a/files/zh-cn/web/html/element/img/index.html +++ b/files/zh-cn/web/html/element/img/index.html @@ -243,7 +243,7 @@ translation_of: Web/HTML/Element/img

    下面的示例将图像嵌入到页面中，且包含用于改善可访问性的备用文本。

    -
    <img src="https://developer.mozilla.org/static/img/favicon144.png"
+
    <img src="favicon144.png"
      alt="MDN logo">
 
    
 
@@ -254,7 +254,7 @@ translation_of: Web/HTML/Element/img
 
    此示例建立在前一个示例的基础上，展示了如何将图像转换为链接。为做到这一点，将 <img> 标签嵌套在 {{HTMLElement("a")}} 之内。这时，备用文本应当描述链接所指向的资源，就像是文本链接一样。
    
 
 
    <a href="https://developer.mozilla.org">
-  <img src="https://developer.mozilla.org/static/img/favicon144.png"
+  <img src="favicon144.png"
        alt="Visit the MDN site">
 </a>
    
 
@@ -264,9 +264,9 @@ translation_of: Web/HTML/Element/img
 
 
    在这个例子中，我们包含了一个 srcset 属性，它引用了 MDN 标志高清版本；在高分辨率设备上，它将被优先加载，取代 src 属性中的图像。在支持 srcset 的{{glossary("User agent", "用户代理")}}中，src 属性中的图片被作为 1x 候选项。
    
 
-
     <img src="https://developer.mozilla.org/static/img/favicon72.png"
+
     <img src="favicon72.png"
       alt="MDN logo"
-      srcset="https://developer.mozilla.org/static/img/favicon144.png 2x">
    
+      srcset="favicon144.png 2x">
    
 
 
    {{EmbedLiveSample("Using_the_srcset_attribute", "100%", "160")}}
    
 
@@ -274,16 +274,16 @@ translation_of: Web/HTML/Element/img
 
 
    在支持 srcset 的用户代理中，当使用 w 描述符时，src 属性会被忽略。当匹配了媒体条件 (min-width: 600px) 时，图像将宽 200px，否则宽 50vw（视图宽度的50%）。
    
 
-
     <img src="/files/16864/clock-demo-200px.png"
+
     <img src="clock-demo-200px.png"
       alt="Clock"
-      srcset="/files/16864/clock-demo-200px.png 200w,
-          /files/16797/clock-demo-400px.png 400w"
+      srcset="clock-demo-200px.png 200w,
+          clock-demo-400px.png 400w"
       sizes="(max-width: 600px) 200px, 50vw">
    
 
 
    {{EmbedLiveSample("Using_the_srcset_and_sizes_attributes", "100%", 350)}}
    
 
 
    
-
    若要看到大小调整的效果，请打开单独的页面查看示例，以便拖动窗口，调整内容区域的大小。
    
+
    若要看到大小调整的效果，请{{LiveSampleLink('Using_the_srcset_and_sizes_attributes', '打开单独的页面查看示例')}}，以便拖动窗口，调整内容区域的大小。
    
 
    
 
 
    安全与隐私方面的考量
    
diff --git a/files/zh-cn/web/html/element/input/index.html b/files/zh-cn/web/html/element/input/index.html
index 80c9c68626..f0f61c5d8f 100644
--- a/files/zh-cn/web/html/element/input/index.html
+++ b/files/zh-cn/web/html/element/input/index.html
@@ -86,7 +86,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+    {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}}
    
   
   
@@ -95,7 +95,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+    {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}}
    
   
   
@@ -104,7 +104,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+    {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}}
    {{HTMLVersionInline("5")}}
   
   
@@ -113,7 +113,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+    {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}}
      {{HTMLVersionInline("5")}}
   
   
@@ -122,7 +122,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+    {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}}
    {{HTMLVersionInline("5")}}
   
   
@@ -131,7 +131,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+    {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}}
 
   
   
@@ -140,7 +140,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+    {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}}
    
   
   
@@ -155,7 +155,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+    {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}}
    
   
   
@@ -164,7 +164,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+    {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}}
    {{HTMLVersionInline("5")}}
   
   
@@ -173,7 +173,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+    {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}}
 
   
   
@@ -182,7 +182,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+    {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}}
    
   
   
@@ -191,7 +191,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+    {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}}
    
   
   
@@ -200,7 +200,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+   {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}}
      {{HTMLVersionInline("5")}}
   
   
@@ -209,7 +209,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+   {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}}
    
   
   
@@ -218,7 +218,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+   {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}}
    {{HTMLVersionInline("5")}}
   
   
@@ -227,7 +227,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+   {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}}
    
   
   
@@ -236,7 +236,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+   {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}}
    {{HTMLVersionInline("5")}}
   
   
@@ -245,7 +245,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+   {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}}
    
   
   
@@ -254,7 +254,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+   {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}}
    {{HTMLVersionInline("5")}}
   
   
@@ -265,7 +265,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+   {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}}
    {{HTMLVersionInline("5")}}
   
   
@@ -274,7 +274,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+   {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}}
 
   
   
@@ -286,7 +286,7 @@ translation_of: Web/HTML/Element/input
    
     
-   
+    {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}}
    
   
  
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/compositing/canvas_clip.png b/files/zh-tw/web/api/canvas_api/tutorial/compositing/canvas_clip.png
new file mode 100644
index 0000000000..182fe81859
Binary files /dev/null and b/files/zh-tw/web/api/canvas_api/tutorial/compositing/canvas_clip.png differ
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/compositing/canvas_clipping_path.png b/files/zh-tw/web/api/canvas_api/tutorial/compositing/canvas_clipping_path.png
new file mode 100644
index 0000000000..ffec31df22
Binary files /dev/null and b/files/zh-tw/web/api/canvas_api/tutorial/compositing/canvas_clipping_path.png differ
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/compositing/example/index.html b/files/zh-tw/web/api/canvas_api/tutorial/compositing/example/index.html
new file mode 100644
index 0000000000..af2ccc0796
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/compositing/example/index.html
@@ -0,0 +1,294 @@
+---
+title: Compositing example
+slug: Web/API/Canvas_API/Tutorial/Compositing/Example
+tags:
+  - Canvas
+  - Example
+  - Graphics
+  - HTML
+  - HTML5
+  - Tutorial
+---
+
    {{CanvasSidebar}}
    
+
+
    This sample program demonstrates a number of compositing operations. The output looks like this:
    
+
+
    {{EmbedLiveSample("Compositing_example", "100%", 7250)}}
    
+
+
    Compositing example
    
+
+
    This code sets up the global values used by the rest of the program.
    
+
+
    var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'source-over','source-in','source-out','source-atop',
+            'destination-over','destination-in','destination-out','destination-atop',
+            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
+            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+          ].reverse();
+var gcoText = [
+'This is the default setting and draws new shapes on top of the existing canvas content.',
+'The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent.',
+'The new shape is drawn where it doesn\'t overlap the existing canvas content.',
+'The new shape is only drawn where it overlaps the existing canvas content.',
+'New shapes are drawn behind the existing canvas content.',
+'The existing canvas content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent.',
+'The existing content is kept where it doesn\'t overlap the new shape.',
+'The existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.',
+'Where both shapes overlap the color is determined by adding color values.',
+'Only the new shape is shown.',
+'Shapes are made transparent where both overlap and drawn normal everywhere else.',
+'The pixels of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result.',
+'The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply)',
+'A combination of multiply and screen. Dark parts on the base layer become darker, and light parts become lighter.',
+'Retains the darkest pixels of both layers.',
+'Retains the lightest pixels of both layers.',
+'Divides the bottom layer by the inverted top layer.',
+'Divides the inverted bottom layer by the top layer, and then inverts the result.',
+'A combination of multiply and screen like overlay, but with top and bottom layer swapped.',
+'A softer version of hard-light. Pure black or white does not result in pure black or white.',
+'Subtracts the bottom layer from the top layer or the other way round to always get a positive value.',
+'Like difference, but with lower contrast.',
+'Preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.',
+'Preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.',
+'Preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.',
+'Preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.'
+          ].reverse();
+var width = 320;
+var height = 340;
+
    
+
+
    Main program
    
+
+
    When the page loads, this code runs to set up and run the example:
    
+
+
    window.onload = function() {
+    // lum in sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // resize canvas
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix()
+    colorSphere();
+    runComposite();
+    return;
+};
+
    
+
+
    And this code, runComposite(), handles the bulk of the work, relying on a number of utility functions to do the hard parts.
    
+
+
    function createCanvas() {
+    var canvas = document.createElement("canvas");
+    canvas.style.background = "url("+op_8x8.data+")";
+    canvas.style.border = "1px solid #000";
+    canvas.style.margin = "5px";
+    canvas.width = width/2;
+    canvas.height = height/2;
+    return canvas;
+}
+
+function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+
+        var canvasToDrawOn = createCanvas();
+        var canvasToDrawFrom = createCanvas();
+        var canvasToDrawResult = createCanvas();
+
+        var ctx = canvasToDrawResult.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawOn.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('existing content', 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawFrom.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('new content', 5, height/2 - 5);
+        ctx.restore();
+
+        dd.appendChild(canvasToDrawOn);
+        dd.appendChild(canvasToDrawFrom);
+        dd.appendChild(canvasToDrawResult);
+
+        dl.appendChild(dd);
+    }
+};
+
    
+
+
    Utility functions
    
+
+
    The program relies on a number of utility functions.
    
+
+
    var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+
    
+
+
    var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // per degree
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n <= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+
    
+
+
    // HSV (1978) = H: Hue / S: Saturation / V: Value
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H >= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");
    
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/compositing/index.html b/files/zh-tw/web/api/canvas_api/tutorial/compositing/index.html
index e5453c93a5..1cdf1d3f15 100644
--- a/files/zh-tw/web/api/canvas_api/tutorial/compositing/index.html
+++ b/files/zh-tw/web/api/canvas_api/tutorial/compositing/index.html
@@ -123,9 +123,13 @@ translation_of: Web/API/Canvas_API/Tutorial/Compositing
 
 
    這裡有這些構圖組合的實際範例，輸出結果在此。
    
 
+
    See compositing examples for the code of the following examples.
    
+
+
    {{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}
    
+
 
    裁剪路徑
    
 
-
    裁剪路徑就像是一般畫布圖形繪圖，但就如同遮罩一樣，會蓋掉不需要的部分，如右圖所示。紅邊星星是我們的裁剪路徑，在路徑區域以外部分都不會出現在畫布上。
    
+
    裁剪路徑就像是一般畫布圖形繪圖，但就如同遮罩一樣，會蓋掉不需要的部分，如右圖所示。紅邊星星是我們的裁剪路徑，在路徑區域以外部分都不會出現在畫布上。
    
 
 
    和上述 globalCompositeOperation 相比，可以發現 source-in 和 source-atop 這兩種構圖組合所達到的效果，和裁剪路徑類似，而其中最大差異在於裁剪路徑不需加入新圖形，消失的部分也不會出現在畫布上，所以，如果想要限定繪圖區域，裁剪路徑會是更理想的作法。
    
 
@@ -202,6 +206,6 @@ function drawStar(ctx,r){
 
 
    繪製裁剪路徑之後，所產生的所有圖形都只會出現在路徑以內，從後來繪製的漸層背景中可看出此特性。我們用自訂的 drawStar() 函數產生 50 個隨機散佈、大小不一的星星。這些星星同樣只會出現在裁剪路徑的範圍之內。
    
 
-
    {{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}
    
+
    {{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}}
    
 
 
    {{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Transformations", "Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}
    
-- 
cgit v1.2.3-54-g00ecf