diff options
25 files changed, 347 insertions, 49 deletions
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></pre> -<p>这将创建以下输出：(如果无法查看图片，<a href="https://mdn.mozillademos.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web$samples/What_is_SVG?revision=1467150">这里</a>)<img alt="" src="https://mdn.mozillademos.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web$samples/What_is_SVG?revision=1467150" style="height: 100px; width: 100px;"></p> +<p>这将创建以下输出：</p> <p>{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}</p> 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 <li>如果这个编号属于一个行级元素，该集合将包含本行级元素之后到下个同级行级元素之前的所有代码。请注意，子元素下的代码块也会被包含，如果不希望这样的效果，可以使用块级元素的id。</li> </ul> -<p>宏使用一个特殊的 URL 来取得一个分组中的代码示例：<code>http://<em>url-of-page</em>$samples/<em>group-id</em></code>。 <code>group-id</code> 指代码所在行级或者块级元素的id。用来展示运行结果的框架(或页面)会运行在沙盒中，在安全条件下实现任何想在网络上实现的功能。当然，在实践中，代码需要针对于包含它的页面，否则会被社区编辑移除。</p> +<p>宏使用一个特殊的 URL 来取得一个分组中的代码示例：<code>https://<em>url-of-page</em>_samples_/<em>group-id</em></code>。 <code>group-id</code> 指代码所在行级或者块级元素的id。用来展示运行结果的框架(或页面)会运行在沙盒中，在安全条件下实现任何想在网络上实现的功能。当然，在实践中，代码需要针对于包含它的页面，否则会被社区编辑移除。</p> <div class="note"> <p><strong>注意：</strong><strong>必须</strong>使用宏来展示运行实例的输出。为保安全，MDN 编辑器将会移除直接使用 <code><iframe></code> 标签的地方。</p> 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<span class="punctuation token" style="color: #999999;">.</span><span clas <p>输出结果:</p> -<p>在<a class="external" href="https://mdn.mozillademos.org/en-US/docs/Web/API/Detecting_device_orientation$samples/Orientation_example?revision=1587910" rel="noopener">这里</a>以新窗口打开此示例；因为有些浏览器中的 {{event("deviceorientation")}} 事件不支持跨域。</p> +<p>在{{LiveSampleLink("Orientation_example", "这里")}}以新窗口打开此示例；因为有些浏览器中的 {{event("deviceorientation")}} 事件不支持跨域。</p> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="260" id="frame_Orientation_example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Detecting_device_orientation$samples/Orientation_example?revision=1587910" width="230"></iframe></p> +<div>{{EmbedLiveSample('Orientation_example', '230', '260')}}</div> <div class="warning" style="font-size: 14px;"> <p><strong>警告:</strong> Chrome 和 Firefox 处理角度的机制不同，所以某些轴上的方向是相反的。</p> 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) { <h3 id="结果">结果</h3> -<p id="EmbedLiveSample('Example'_''_''_''_'WebAPIDataTransfergetData')"><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/DataTransfer/getData$samples/Example?revision=1539300" width="600"></iframe></p> +<p id="EmbedLiveSample('Example'_''_''_''_'WebAPIDataTransfergetData')">{{ EmbedLiveSample('Example', 600) }}</p> <h2 id="说明">说明</h2> 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) => { <h4 id="结果">结果</h4> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="160px" id="frame_Live_example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Document/readystatechange_event$samples/Live_example?revision=1607037" width="100%"></iframe></p> +<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</p> <h2 id="规范">规范</h2> 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}"`;</pre> <p>输出类似这样:</p> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="60" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/API/DOMTokenList$samples/Examples?revision=1600968" width="100%"></iframe></p> +<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> <h2 id="去除空格和重复项目">去除空格和重复项目</h2> @@ -81,7 +81,7 @@ span.textContent = `span classList is "${classes}"`;</pre> <p>输出类似这样：</p> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="60" id="frame_Trimming_of_whitespace_and_removal_of_duplicates" src="https://mdn.mozillademos.org/en-US/docs/Web/API/DOMTokenList$samples/Trimming_of_whitespace_and_removal_of_duplicates?revision=1600968" width="100%"></iframe></p> +<p>{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}</p> <dl> <dt></dt> 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 ) { <h4 id="结果">结果</h4> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="200" id="frame_mouseout_and_mouseleave" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Element/mouseout_event$samples/mouseout_and_mouseleave?revision=1552558" width="640"></iframe></p> +<p>{{EmbedLiveSample("mouseout_and_mouseleave", 640, 200)}}</p> <h2 id="规范">规范</h2> 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) { <h3 id="结果">结果</h3> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLElement/beforeinput_event$samples/Examples?revision=1609140"></iframe></p> +<p>{{EmbedLiveSample("Simple_logger")}}</p> <h2 id="规范">规范</h2> 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) { <h3 id="结果">结果</h3> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLElement/input_event$samples/Examples?revision=1609143"></iframe></p> +<p>{{EmbedLiveSample("Examples")}}</p> <h2 id="规范">规范</h2> 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 <h3 id="结果">结果</h3> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange$samples/Example?revision=1557137"></iframe></p> +<p>{{EmbedLiveSample("Example")}}</p> <h2 id="规范">规范</h2> 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; })</pre> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="80px" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex$samples/Example?revision=1546597" width="200px"></iframe></p> +<p>{{EmbedLiveSample("Example", "200px", "80px")}}</p> <h2 id="规范">规范</h2> 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) { <h4 id="结果">结果</h4> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/MouseEvent/screenX$samples/Example?revision=1510648"></iframe></p> +<p>{{EmbedLiveSample("Example")}}</p> <h2 id="规范">规范</h2> 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) { <h3 id="结果">结果</h3> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/MouseEvent/screenY$samples/Example?revision=1510695"></iframe></p> +<p>{{EmbedLiveSample("Example")}}</p> <h2 id="规范">规范</h2> 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 => { <h4 id="结果">结果</h4> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Live_sample" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Range/selectNodeContents$samples/Live_sample?revision=1566740"></iframe></p> +<p>{{EmbedLiveSample("Live_sample")}}</p> <h2 id="Specification" name="Specification">规范</h2> 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);</pre> <h3 id="结果">结果</h3> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Range/surroundContents$samples/Example?revision=1549261"></iframe></p> +<p>{{EmbedLiveSample("Example")}}</p> <h2 id="Specification" name="Specification">规范</h2> 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 Binary files differnew file mode 100644 index 0000000000..999ad528fe --- /dev/null +++ b/files/zh-cn/web/html/element/img/clock-demo-200px.png 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 Binary files differnew file mode 100644 index 0000000000..999ad528fe --- /dev/null +++ b/files/zh-cn/web/html/element/img/clock-demo-400px.png diff --git a/files/zh-cn/web/html/element/img/favicon144.png b/files/zh-cn/web/html/element/img/favicon144.png Binary files differnew file mode 100644 index 0000000000..e30b574b65 --- /dev/null +++ b/files/zh-cn/web/html/element/img/favicon144.png diff --git a/files/zh-cn/web/html/element/img/favicon72.png b/files/zh-cn/web/html/element/img/favicon72.png Binary files differnew file mode 100644 index 0000000000..db68260ca1 --- /dev/null +++ b/files/zh-cn/web/html/element/img/favicon72.png 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 <p>下面的示例将图像嵌入到页面中，且包含用于改善可访问性的备用文本。</p> -<pre class="brush: html notranslate"><img src="https://developer.mozilla.org/static/img/favicon144.png" +<pre class="brush: html notranslate"><img src="favicon144.png" alt="MDN logo"> </pre> @@ -254,7 +254,7 @@ translation_of: Web/HTML/Element/img <p>此示例建立在前一个示例的基础上，展示了如何将图像转换为链接。为做到这一点，将 <code><img></code> 标签嵌套在 {{HTMLElement("a")}} 之内。这时，备用文本应当描述链接所指向的资源，就像是文本链接一样。</p> <pre class="brush: html notranslate"><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></pre> @@ -264,9 +264,9 @@ translation_of: Web/HTML/Element/img <p>在这个例子中，我们包含了一个 <code>srcset</code> 属性，它引用了 MDN 标志高清版本；在高分辨率设备上，它将被优先加载，取代 <code>src</code> 属性中的图像。在支持 <code>srcset</code> 的{{glossary("User agent", "用户代理")}}中，<code>src</code> 属性中的图片被作为 <code>1x</code> 候选项。</p> -<pre class="brush: html notranslate"> <img src="https://developer.mozilla.org/static/img/favicon72.png" +<pre class="brush: html notranslate"> <img src="favicon72.png" alt="MDN logo" - srcset="https://developer.mozilla.org/static/img/favicon144.png 2x"></pre> + srcset="favicon144.png 2x"></pre> <p>{{EmbedLiveSample("Using_the_srcset_attribute", "100%", "160")}}</p> @@ -274,16 +274,16 @@ translation_of: Web/HTML/Element/img <p>在支持 <code>srcset</code> 的用户代理中，当使用 <code>w</code> 描述符时，src 属性会被忽略。当匹配了媒体条件 <code>(min-width: 600px)</code> 时，图像将宽 200px，否则宽 50vw（视图宽度的50%）。</p> -<pre class="brush: html notranslate"> <img src="/files/16864/clock-demo-200px.png" +<pre class="brush: html notranslate"> <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"></pre> <p>{{EmbedLiveSample("Using_the_srcset_and_sizes_attributes", "100%", 350)}}</p> <div class="blockIndicator note"> -<p>若要看到大小调整的效果，请<a href="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/img$samples/Using_the_srcset_and_sizes_attributes">打开单独的页面查看示例</a>，以便拖动窗口，调整内容区域的大小。</p> +<p>若要看到大小调整的效果，请{{LiveSampleLink('Using_the_srcset_and_sizes_attributes', '打开单独的页面查看示例')}}，以便拖动窗口，调整内容区域的大小。</p> </div> <h2 id="安全与隐私方面的考量">安全与隐私方面的考量</h2> 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 <td id="examplebutton"> <pre class="brush: html hidden"> <input type="button" name="button" /></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplebutton" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplebutton?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}}</td> <td></td> </tr> <tr> @@ -95,7 +95,7 @@ translation_of: Web/HTML/Element/input <td id="examplecheckbox"> <pre class="brush: html hidden"> <input type="checkbox" name="checkbox"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplecheckbox" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplecheckbox?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}}</td> <td></td> </tr> <tr> @@ -104,7 +104,7 @@ translation_of: Web/HTML/Element/input <td id="examplecolor"> <pre class="brush: html hidden"> <input type="color" name="color"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplecolor" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplecolor?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}}</td> <td>{{HTMLVersionInline("5")}}</td> </tr> <tr> @@ -113,7 +113,7 @@ translation_of: Web/HTML/Element/input <td id="exampledate"> <pre class="brush: html hidden"> <input type="date" name="date"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampledate" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampledate?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}}</td> <td> {{HTMLVersionInline("5")}}</td> </tr> <tr> @@ -122,7 +122,7 @@ translation_of: Web/HTML/Element/input <td id="exampledtl"> <pre class="brush: html hidden"> <input type="datetime-local" name="datetime-local"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampledtl" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampledtl?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}}</td> <td>{{HTMLVersionInline("5")}}</td> </tr> <tr> @@ -131,7 +131,7 @@ translation_of: Web/HTML/Element/input <td id="exampleemail"> <pre class="brush: html hidden"> <input type="email" name="email"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampleemail" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampleemail?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}}</td> <td></td> </tr> <tr> @@ -140,7 +140,7 @@ translation_of: Web/HTML/Element/input <td id="examplefile"> <pre class="brush: html hidden"> <input type="file" accept="image/*, text/*" name="file"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplefile" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplefile?revision=1612291" width="100%"></iframe></td> + {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}}</td> <td></td> </tr> <tr> @@ -155,7 +155,7 @@ translation_of: Web/HTML/Element/input <td id="exampleimage"> <pre class="brush: html hidden"> <input type="image" name="image" src="" alt="image input"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampleimage" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampleimage?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}}</td> <td></td> </tr> <tr> @@ -164,7 +164,7 @@ translation_of: Web/HTML/Element/input <td id="examplemonth"> <pre class="brush: html hidden"> <input type="month" name="month"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplemonth" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplemonth?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}}</td> <td>{{HTMLVersionInline("5")}}</td> </tr> <tr> @@ -173,7 +173,7 @@ translation_of: Web/HTML/Element/input <td id="examplenumber"> <pre class="brush: html hidden"> <input type="number" name="number"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplenumber" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplenumber?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}}</td> <td></td> </tr> <tr> @@ -182,7 +182,7 @@ translation_of: Web/HTML/Element/input <td id="examplepassword"> <pre class="brush: html hidden"> <input type="password" name="password"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplepassword" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplepassword?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}}</td> <td></td> </tr> <tr> @@ -191,7 +191,7 @@ translation_of: Web/HTML/Element/input <td id="exampleradio"> <pre class="brush: html hidden"> <input type="radio" name="radio"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampleradio" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampleradio?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}}</td> <td></td> </tr> <tr> @@ -200,7 +200,7 @@ translation_of: Web/HTML/Element/input <td id="examplerange"> <pre class="brush: html hidden"> <input type="range" name="range" min="0" max="25"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplerange" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplerange?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}}</td> <td> {{HTMLVersionInline("5")}}</td> </tr> <tr> @@ -209,7 +209,7 @@ translation_of: Web/HTML/Element/input <td id="examplereset"> <pre class="brush: html hidden"> <input type="reset" name="reset"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplereset" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplereset?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}}</td> <td></td> </tr> <tr> @@ -218,7 +218,7 @@ translation_of: Web/HTML/Element/input <td id="examplesearch"> <pre class="brush: html hidden"> <input type="search" name="search"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplesearch" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplesearch?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}}</td> <td>{{HTMLVersionInline("5")}}</td> </tr> <tr> @@ -227,7 +227,7 @@ translation_of: Web/HTML/Element/input <td id="examplesubmit"> <pre class="brush: html hidden"> <input type="submit" name="submit"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplesubmit" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplesubmit?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}}</td> <td></td> </tr> <tr> @@ -236,7 +236,7 @@ translation_of: Web/HTML/Element/input <td id="exampletel"> <pre class="brush: html hidden"> <input type="tel" name="tel"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampletel" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampletel?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}}</td> <td>{{HTMLVersionInline("5")}}</td> </tr> <tr> @@ -245,7 +245,7 @@ translation_of: Web/HTML/Element/input <td id="exampletext"> <pre class="brush: html hidden"> <input type="text" name="text"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampletext" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampletext?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}}</td> <td></td> </tr> <tr> @@ -254,7 +254,7 @@ translation_of: Web/HTML/Element/input <td id="exampletime"> <pre class="brush: html hidden"> <input type="time" name="time"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampletime" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampletime?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}}</td> <td>{{HTMLVersionInline("5")}}</td> </tr> <tr> @@ -265,7 +265,7 @@ translation_of: Web/HTML/Element/input <td id="exampleurl"> <pre class="brush: html hidden"> <input type="url" name="url"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampleurl" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampleurl?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}}</td> <td>{{HTMLVersionInline("5")}}</td> </tr> <tr> @@ -274,7 +274,7 @@ translation_of: Web/HTML/Element/input <td id="exampleweek"> <pre class="brush: html hidden"> <input type="week" name="week"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampleweek" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampleweek?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}}</td> <td></td> </tr> <tr> @@ -286,7 +286,7 @@ translation_of: Web/HTML/Element/input <td id="exampledatetime"> <pre class="brush: html hidden"> <input type="datetime" name="datetime"/></pre> - <iframe class="live-sample-frame nobutton" frameborder="0" height="75" id="frame_exampledatetime" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampledatetime?revision=1612291" width="200"></iframe></td> + {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}}</td> <td></td> </tr> </tbody> 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 Binary files differnew file mode 100644 index 0000000000..182fe81859 --- /dev/null +++ b/files/zh-tw/web/api/canvas_api/tutorial/compositing/canvas_clip.png 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 Binary files differnew file mode 100644 index 0000000000..ffec31df22 --- /dev/null +++ b/files/zh-tw/web/api/canvas_api/tutorial/compositing/canvas_clipping_path.png 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 +--- +<div>{{CanvasSidebar}}</div> + +<p>This sample program demonstrates a number of <a href="/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation">compositing operations</a>. The output looks like this:</p> + +<p>{{EmbedLiveSample("Compositing_example", "100%", 7250)}}</p> + +<h2 id="Compositing_example">Compositing example</h2> + +<p>This code sets up the global values used by the rest of the program.</p> + +<pre class="brush: js">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; +</pre> + +<h3 id="Main_program">Main program</h3> + +<p>When the page loads, this code runs to set up and run the example:</p> + +<pre class="brush: js">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; +}; +</pre> + +<p>And this code, <code>runComposite()</code>, handles the bulk of the work, relying on a number of utility functions to do the hard parts.</p> + +<pre class="brush: js">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); + } +}; +</pre> + +<h3 id="Utility_functions">Utility functions</h3> + +<p>The program relies on a number of utility functions.</p> + +<pre class="brush: js">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(); +}; +</pre> + +<pre class="brush: js">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; +}; +</pre> + +<pre class="brush: js">// 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");</pre> 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 <p>這裡有這些構圖組合的<a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing/Example" title="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing/Example">實際範例</a>，<a href="https://mdn.mozillademos.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing/Example$samples/Compositing_example" title="https://mdn.mozillademos.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing/Example$samples/Compositing_example">輸出結果</a>在此。</p> +<p>See <a href="/zh-TW/docs/Web/API/Canvas_API/Tutorial/Compositing/Example">compositing examples</a> for the code of the following examples.</p> + +<p>{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p> + <h2 id="Clipping_paths" name="Clipping_paths">裁剪路徑</h2> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">裁剪路徑就像是一般畫布圖形繪圖，但就如同遮罩一樣，會蓋掉不需要的部分，如右圖所示。紅邊星星是我們的裁剪路徑，在路徑區域以外部分都不會出現在畫布上。</p> +<p><img alt="" class="internal" src="canvas_clipping_path.png" style="float: right;">裁剪路徑就像是一般畫布圖形繪圖，但就如同遮罩一樣，會蓋掉不需要的部分，如右圖所示。紅邊星星是我們的裁剪路徑，在路徑區域以外部分都不會出現在畫布上。</p> <p>和上述 globalCompositeOperation 相比，可以發現 source-in 和 source-atop 這兩種構圖組合所達到的效果，和裁剪路徑類似，而其中最大差異在於裁剪路徑不需加入新圖形，消失的部分也不會出現在畫布上，所以，如果想要限定繪圖區域，裁剪路徑會是更理想的作法。</p> @@ -202,6 +206,6 @@ function drawStar(ctx,r){ <p>繪製裁剪路徑之後，所產生的所有圖形都只會出現在路徑以內，從後來繪製的漸層背景中可看出此特性。我們用自訂的 drawStar() 函數產生 50 個隨機散佈、大小不一的星星。這些星星同樣只會出現在裁剪路徑的範圍之內。</p> -<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p> +<p>{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}}</p> <p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Transformations", "Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}</p> |
