diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/canvasrenderingcontext2d | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/canvasrenderingcontext2d')
69 files changed, 11506 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/addhitregion/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/addhitregion/index.html new file mode 100644 index 0000000000..1b1d7fc589 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/addhitregion/index.html @@ -0,0 +1,307 @@ +--- +title: CanvasRenderingContext2D.addHitRegion() +slug: Web/API/CanvasRenderingContext2D/addHitRegion +translation_of: Web/API/CanvasRenderingContext2D/addHitRegion +--- +<div>{{APIRef}} {{obsolete_header}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.addHitRegion()</code></strong> 是 Canvas 2D API 给位图添加点击区域的方法。 它允许你很容易地实现一个点击区域， 让你触发 DOM 元素的事件， 去探索看不见的画布。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.addHitRegion(<em>options</em>);</var> +</pre> + +<h3 id="选项">选项</h3> + +<p><code>options</code> 参数是可选的。 当赋值时， {{jsxref("Object")}} 包含以下属性：</p> + +<dl> + <dt><code>path</code></dt> + <dd>{{domxref("Path2D")}} 对象， 描述点击区的区域范围。 如果不给此属性赋值， 则会使用当前的路径。</dd> + <dt><code>fillRule</code></dt> + <dd>遵循的填充规则（默认是“nonzero”）。</dd> + <dt><code>id</code></dt> + <dd>点击区的ID，在事件中可以引用此ID，就像示例中那样。</dd> + <dt><code>parentID</code></dt> + <dd>父区域的ID，为了光标回退或者辅助工具导航 。</dd> + <dt><code>cursor</code></dt> + <dd>鼠标移动到点击区时的 {{cssxref("cursor")}} （默认是 "<code>inherit</code>"）。 继承父点击区域的光标，或者canvas元素的光标。</dd> + <dt><code>control</code></dt> + <dd>触发事件的元素（canvas的子孙元素）。 默认为 <code>null。</code></dd> + <dt><code>label</code></dt> + <dd>如果没有control属性，文本标签作为辅助工具，用作点击区域的描述。 默认为 <code>null。</code></dd> + <dt><code>role</code></dt> + <dd> 如果没有control属性，<a href="/en-US/docs/Web/Accessibility/ARIA">ARIA role</a> 作为辅助工具，决定如何表示点击区域。 默认为 <code>null</code>.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_addHitRegion_方法">使用 <code>addHitRegion</code> 方法</h3> + +<p>这是一段使用 <code>addHitRegion 方法的简单的代码片段。</code></p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js;">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +canvas.addEventListener("mousemove", function(event){ + if(event.region) { + alert("ouch, my eye :("); + } +}); + +ctx.beginPath(); +ctx.arc(100, 100, 75, 0, 2 * Math.PI, false); +ctx.lineWidth = 5; +ctx.stroke(); + +// eyes +ctx.beginPath(); +ctx.arc(70, 80, 10, 0, 2 * Math.PI, false); +ctx.arc(130, 80, 10, 0, 2 * Math.PI, false); +ctx.fill(); +ctx.addHitRegion({id: "eyes"}); + +// mouth +ctx.beginPath(); +ctx.arc(100, 110, 50, 0, Math.PI, false); +ctx.stroke(); +</pre> + +<p>修改下面的代码并在线查看canvas的变化（如果你没有看到全部的效果，请查看浏览器兼容性列表。如果你当前的浏览器支持点击区域，你需要激活偏好设置） 。</p> + +<div style="display: none;"> +<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" style="height:250px"> +ctx.beginPath(); +ctx.arc(100, 100, 75, 0, 2 * Math.PI, false); +ctx.lineWidth = 5; +ctx.stroke(); + +// eyes +ctx.beginPath(); +ctx.arc(70, 80, 10, 0, 2 * Math.PI, false); +ctx.arc(130, 80, 10, 0, 2 * Math.PI, false); +ctx.fill(); +ctx.addHitRegion({id: "eyes"}); + +// mouth +ctx.beginPath(); +ctx.arc(100, 110, 50, 0, Math.PI, false); +ctx.stroke();</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(); +}); + +canvas.addEventListener("mousemove", function(event){ + if(event.region) { + alert("ouch, my eye :("); + } +}); + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 520) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-addhitregion", "CanvasRenderingContext2D.addHitRegion")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><code>Basic support</code></td> + <td>{{CompatVersionUnknown}}[1]</td> + <td>{{CompatGeckoDesktop(30)}} [2]</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td><code>id</code></td> + <td>{{CompatVersionUnknown}}[1]</td> + <td>{{CompatGeckoDesktop(30)}} [2]</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td><code>control</code></td> + <td>{{CompatVersionUnknown}}[1]</td> + <td>{{CompatGeckoDesktop(30)}} [2]</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td><code>path</code></td> + <td>{{CompatVersionUnknown}}[1]</td> + <td>{{CompatGeckoDesktop(39)}} [2]</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td><code>fillRule</code></td> + <td>{{CompatVersionUnknown}}[1]</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td>other hit region options</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{CompatGeckoMobile(30)}}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td><code>id</code></td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{CompatGeckoMobile(30)}}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td><code>control</code></td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{CompatGeckoMobile(30)}}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td><code>path</code></td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{CompatGeckoMobile(39)}}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td><code>fillRule</code></td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td>other hit region options</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="兼容性注解">兼容性注解</h3> + +<ul> + <li>[1] 此特性需要一个特性标志。 设置 <code>ExperimentalCanvasFeatures</code> 标志为 <code>true</code> 进行启用。</li> + <li>[2] 此特性需要一个特性偏好设置。在 about:config里面，设置 <code>canvas.hitregions.enabled</code> 为true。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</li> + <li>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html new file mode 100644 index 0000000000..05b8ea3b62 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html @@ -0,0 +1,218 @@ +--- +title: CanvasRenderingContext2D.arc() +slug: Web/API/CanvasRenderingContext2D/arc +translation_of: Web/API/CanvasRenderingContext2D/arc +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> 是 Canvas 2D API 绘制圆弧路径的方法。 圆弧路径的圆心在 <em>(x, y)</em> 位置，半径为<em> r</em> ，根据<em>anticlockwise</em> （默认为顺时针）指定的方向从 <em>startAngle</em> 开始绘制，到 <em>endAngle</em> 结束。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.arc(x, y, radius, startAngle, endAngle, anticlockwise);</var> +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>x</code></dt> + <dd>圆弧中心（圆心）的 x 轴坐标。</dd> + <dt><code>y</code></dt> + <dd>圆弧中心（圆心）的 y 轴坐标。</dd> + <dt><code>radius</code></dt> + <dd>圆弧的半径。</dd> + <dt><code>startAngle</code></dt> + <dd>圆弧的起始点， x轴方向开始计算，单位以弧度表示。</dd> + <dt><code>endAngle</code></dt> + <dd>圆弧的终点， 单位以弧度表示。</dd> + <dt><code>anticlockwise</code> {{optional_inline}}</dt> + <dd>可选的{{jsxref("Boolean")}}值 ，如果为 <code>true</code>，逆时针绘制圆弧，反之，顺时针绘制。 </dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_arc_method" name="Using_the_arc_method">使用 <code>arc</code> 方法</h3> + +<p>这是一段绘制圆的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.beginPath(); +ctx.arc(75, 75, 50, 0, 2 * Math.PI); +ctx.stroke(); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<h6 id="Playable_code" name="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.beginPath(); +ctx.arc(50, 50, 50, 0, 2 * Math.PI, false); +ctx.stroke();</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> + +<h3 id="Different_shapes_demonstrated" name="Different_shapes_demonstrated">不同的形状演示</h3> + +<p>在此例中，使用 arc() 尽可能地绘制不同的形状。</p> + +<div style="display: none;"> +<h6 id="HTML_2">HTML</h6> + +<pre class="brush: html"><canvas id="canvas" width="150" height="200"></canvas> +</pre> + +<h6 id="JavaScript_2">JavaScript</h6> +</div> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +// Draw shapes +for (i=0;i<4;i++){ + for(j=0;j<3;j++){ + ctx.beginPath(); + var x = 25+j*50; // x coordinate + var y = 25+i*50; // y coordinate + var radius = 20; // Arc radius + var startAngle = 0; // Starting point on circle + var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle + var clockwise = i%2==0 ? false : true; // clockwise or anticlockwise + + ctx.arc(x,y,radius,startAngle,endAngle, clockwise); + + if (i>1){ + ctx.fill(); + } else { + ctx.stroke(); + } + } +}</pre> + +<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko-specific_注解">Gecko-specific 注解</h3> + +<p>从 Gecko 2.0 {{geckoRelease("2.0")}}开始：</p> + +<ul> + <li><code>anticlockwise</code> 参数是可选的，</li> + <li>描述了 radius 为负数会抛出 {{domxref("DOMError", "IndexSizeError")}} 错误（“索引或长度为负数，或者超过允许的数值”）。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html new file mode 100644 index 0000000000..8c8e2dc5ff --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html @@ -0,0 +1,212 @@ +--- +title: CanvasRenderingContext2D.arcTo() +slug: Web/API/CanvasRenderingContext2D/arcTo +translation_of: Web/API/CanvasRenderingContext2D/arcTo +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arcTo()</code></strong> 是 Canvas 2D API 根据控制点和半径绘制圆弧路径，使用当前的描点(前一个moveTo或lineTo等函数的止点)。根据当前描点与给定的控制点1连接的直线，和控制点1与控制点2连接的直线，作为使用指定半径的圆的<strong>切线</strong>，画出两条切线之间的弧线路径。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.arcTo(x1, y1, x2, y2, radius);</var> +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>x1</code></dt> + <dd>第一个控制点的 x 轴坐标。</dd> + <dt><code>y1</code></dt> + <dd>第一个控制点的 y 轴坐标。</dd> + <dt><code>x2</code></dt> + <dd>第二个控制点的 x 轴坐标。</dd> + <dt><code>y2</code></dt> + <dd>第二个控制点的 y 轴坐标。</dd> + <dt><code>radius</code></dt> + <dd>圆弧的半径。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_arc_method" name="Using_the_arc_method">使用 <code>arcTo</code> 方法</h3> + +<p>这是一段绘制圆弧的简单的代码片段。 基础点是蓝色的，两个控制点是红色的。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.setLineDash([]) +ctx.beginPath(); +ctx.moveTo(150, 20); +ctx.arcTo(150,100,50,20,30); +ctx.stroke(); + +ctx.fillStyle = 'blue'; +// base point +ctx.fillRect(150, 20, 10, 10); + +ctx.fillStyle = 'red'; +// control point one +ctx.fillRect(150, 100, 10, 10); +// control point two +ctx.fillRect(50, 20, 10, 10); +// +ctx.setLineDash([5,5]) +ctx.moveTo(150, 20); +ctx.lineTo(150,100); +ctx.lineTo(50, 20); +ctx.stroke(); +ctx.beginPath(); +ctx.arc(120,38,30,0,2*Math.PI); +ctx.stroke(); +</pre> + +<p>{{ EmbedLiveSample('Using_the_arc_method', 315, 165) }}</p> + +<h3 id="Trying_the_arcTo_parameters" name="Trying_the_arcTo_parameters">尝试 <code>arcTo</code> 参数</h3> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<pre class="brush: html"><canvas id="canvas" class="playable-canvas" height="200" width="400"></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.setLineDash([]) +ctx.beginPath(); +ctx.moveTo(150, 20); +ctx.arcTo(150,100,50,20,30); +ctx.stroke(); + +ctx.fillStyle = 'blue'; +// base point +ctx.fillRect(150, 20, 10, 10); + +ctx.fillStyle = 'red'; +// control point one +ctx.fillRect(150, 100, 10, 10); +// control point two +ctx.fillRect(50, 20, 10, 10); +// +ctx.setLineDash([5,5]) +ctx.moveTo(150, 20); +ctx.lineTo(150,100); +ctx.lineTo(50, 20); +ctx.stroke(); +ctx.beginPath(); +ctx.arc(120,38,30,0,2*Math.PI); +ctx.stroke();</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('Trying_the_arcTo_parameters', 700, 360) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arcto", "CanvasRenderingContext2D.arcTo")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.html new file mode 100644 index 0000000000..427a3a062d --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.html @@ -0,0 +1,174 @@ +--- +title: CanvasRenderingContext2D.beginPath() +slug: Web/API/CanvasRenderingContext2D/beginPath +translation_of: Web/API/CanvasRenderingContext2D/beginPath +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.beginPath()</code></strong> 是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时，调用此方法。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.beginPath();</var> +</pre> + +<h2 id="示例">示例</h2> + +<h3 id="使用_beginPath_方法">使用 <code>beginPath</code> 方法</h3> + +<p>这是一段受用 <code>beginPath</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5,12]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +// First path +ctx.beginPath(); +ctx.strokeStyle = 'blue'; +ctx.moveTo(20,20); +ctx.lineTo(200,20); +ctx.stroke(); + +// Second path +ctx.beginPath(); +ctx.strokeStyle = 'green'; +ctx.moveTo(20,20); +ctx.lineTo(120,120); +ctx.stroke(); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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" style="height:200px"> +// First path +ctx.beginPath(); +ctx.strokeStyle = 'blue'; +ctx.moveTo(20,20); +ctx.lineTo(200,20); +ctx.stroke(); + +// Second path +ctx.beginPath(); +ctx.strokeStyle = 'green'; +ctx.moveTo(20,20); +ctx.lineTo(120, 120); +ctx.stroke();</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, 460) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.closePath()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.html new file mode 100644 index 0000000000..5a66c1f6e8 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.html @@ -0,0 +1,191 @@ +--- +title: CanvasRenderingContext2D.bezierCurveTo() +slug: Web/API/CanvasRenderingContext2D/bezierCurveTo +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.bezierCurveTo()</code></strong> 是 Canvas 2D API 绘制三次贝赛尔曲线路径的方法。 该方法需要三个点。 第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 <code>moveTo()</code> 进行修改。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>cp1x</code></dt> + <dd>第一个控制点的 x 轴坐标。</dd> + <dt><code>cp1y</code></dt> + <dd>第一个控制点的 y 轴坐标。</dd> + <dt><code>cp2x</code></dt> + <dd>第二个控制点的 x 轴坐标。</dd> + <dt><code>cp2y</code></dt> + <dd>第二个控制点的 y 轴坐标。</dd> + <dt><code>x</code></dt> + <dd>结束点的 x 轴坐标。</dd> + <dt><code>y</code></dt> + <dd>结束点的 y 轴坐标。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_bezierCurveTo_方法">使用 <code>bezierCurveTo</code> 方法</h3> + +<p>这是一段绘制贝赛尔曲线的简单的代码片段。 <span style="color: red;">控制点是红色的</span>，<span style="color: blue;"> 开始和结束点是蓝色的。</span></p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.beginPath(); +ctx.moveTo(50,20); +ctx.bezierCurveTo(230, 30, 150, 60, 50, 100); +ctx.stroke(); + +ctx.fillStyle = 'blue'; +// start point +ctx.fillRect(50, 20, 10, 10); +// end point +ctx.fillRect(50, 100, 10, 10); + +ctx.fillStyle = 'red'; +// control point one +ctx.fillRect(230, 30, 10, 10); +// control point two +ctx.fillRect(150, 70, 10, 10);</pre> + +<p>{{ EmbedLiveSample('使用_bezierCurveTo_方法', 315, 165) }}</p> + +<h3 id="尝试_bezierCurveTo_参数">尝试 <code>bezierCurveTo</code> 参数</h3> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.beginPath(); +ctx.bezierCurveTo(50, 100, 180, 10, 20, 10); +ctx.stroke();</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('尝试_bezierCurveTo_参数', 700, 360) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beziercurveto", "CanvasRenderingContext2D.beziercurveto")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li><a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">维基百科关于贝赛尔曲线</a>。</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.html new file mode 100644 index 0000000000..63331f1630 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.html @@ -0,0 +1,57 @@ +--- +title: CanvasRenderingContext2D.canvas +slug: Web/API/CanvasRenderingContext2D/canvas +tags: + - API + - Canvas +translation_of: Web/API/CanvasRenderingContext2D/canvas +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code><span>.canvas</span></code></strong> 属性是 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas API</a> 的一部分，是对与给定上下文关联的{{domxref("HTMLCanvasElement")}}对象的只读引用。如果没有 {{HTMLElement("canvas")}} 元素与之对应，对象值为{{jsxref("null")}} 。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em></var>.canvas;</pre> + +<h2 id="示例">示例</h2> + +<p>给出 {{HTMLElement("canvas")}} 元素：</p> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<p>你可以通过CanvasRenderingContext2D调用内部的canvas属性，获取canvas的一个反向引用:</p> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.canvas // HTMLCanvasElement +</pre> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.CanvasRenderingContext2D.canvas")}}</p> + +<h2 id="See_Also" name="See_Also">参见</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D")}} 接口</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas API</a></li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/clearhitregions/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/clearhitregions/index.html new file mode 100644 index 0000000000..a119329e0f --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/clearhitregions/index.html @@ -0,0 +1,121 @@ +--- +title: CanvasRenderingContext2D.clearHitRegions() +slug: Web/API/CanvasRenderingContext2D/clearHitRegions +translation_of: Web/API/CanvasRenderingContext2D/clearHitRegions +--- +<div>{{APIRef}} {{obsolete_header}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearHitRegions()</code></strong> 是 Canvas 2D API 在画布中删除所有点击区域的方法。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.clearHitRegions();</var> +</pre> + +<h2 id="示例">示例</h2> + +<h3 id="使用_clearHitRegions_方法">使用 <code>clearHitRegions</code> 方法</h3> + +<p>这仅是一段简单的使用 <code>clearHitRegions</code> 方法的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[10]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +// set some hit regions +ctx.addHitRegion({id: "eyes"}); +ctx.addHitRegion({id: "nose"}); +ctx.addHitRegion({id: "mouth"}); + +// remove them altogether from the canvas +ctx.clearHitRegions(); +</pre> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearhitregions", "CanvasRenderingContext2D.clearHitRegions")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}[1]</td> + <td>{{CompatGeckoDesktop(38)}} [2]</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{CompatGeckoMobile(38)}} [2]</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="兼容性注解">兼容性注解</h3> + +<ul> + <li>[1] 此特性需要一个特性标志。 设置 <code>ExperimentalCanvasFeatures</code> 标志为 <code>true</code> 进行启用。</li> + <li>[2] 此特性需要一个特性偏好设置。 在 about:config中设置 <code>canvas.hitregions.enabled</code> 为 true。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</li> + <li>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.html new file mode 100644 index 0000000000..0a08faaaf2 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.html @@ -0,0 +1,110 @@ +--- +title: CanvasRenderingContext2D.clearRect() +slug: Web/API/CanvasRenderingContext2D/clearRect +translation_of: Web/API/CanvasRenderingContext2D/clearRect +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong>是Canvas 2D API的方法，这个方法通过把像素设置为透明以达到擦除一个矩形区域的目的。</p> + +<div class="blockIndicator note"> +<p><strong>注意:</strong> 如果没有依照 <a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#%E7%BB%98%E5%88%B6%E8%B7%AF%E5%BE%84">绘制路径</a> 的步骤，使用 <code>clearRect()</code> 会导致意想之外的结果。请确保在调用 <code>clearRect()</code>之后绘制新内容前调用{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} 。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">void <em>ctx</em>.clearRect(<em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>); +</pre> + +<p> <code>clearRect()</code> 方法在一个矩形区域内设置所有像素都是透明的(<code>rgba(0,0,0,0)</code>)。这个矩形范围的左上角在 <code>(x, y)</code>，宽度和高度分别由 <code>width</code> 和<code>height</code>确定。</p> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>矩形起点的 x 轴坐标。</dd> + <dt><code>y</code></dt> + <dd>矩形起点的 y 轴坐标。</dd> + <dt><code>width</code></dt> + <dd>矩形的宽度。</dd> + <dt><code>height</code></dt> + <dd>矩形的高度。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="清除整个画布">清除整个画布</h3> + +<p>这段代码清除整个画布。这段代码通常在动画的每一帧开始被执行。清除的范围涵覆盖了整个 {{HtmlElement("canvas")}} 元素。</p> + +<pre class="brush: js; highlight:[3] notranslate">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +ctx.clearRect(0, 0, canvas.width, canvas.height);</pre> + +<h3 id="清除一部分画布">清除一部分画布</h3> + +<p>这仅是一段简单地使用 <code>clearRect</code> 方法的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>下面代码中被清除的区域是一个矩形，它的左上点坐标在(10, 10)，宽度和高度分别是120和100像素。</p> + +<pre class="brush: js; highlight:[11] notranslate">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +// 绘制黄色背景 +ctx.beginPath(); +ctx.fillStyle = '#ff6'; +ctx.fillRect(0, 0, canvas.width, canvas.height); + +// 绘制蓝色三角形 +ctx.beginPath(); +ctx.fillStyle = 'blue'; +ctx.moveTo(20, 20); +ctx.lineTo(180, 20); +ctx.lineTo(130, 130); +ctx.closePath(); +ctx.fill(); + +// 清除一部分画布 +ctx.clearRect(10, 10, 120, 100);</pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample('Erasing_part_of_a_canvas', 700, 180)}}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.clearRect")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.html new file mode 100644 index 0000000000..fd68c7e3b6 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.html @@ -0,0 +1,191 @@ +--- +title: CanvasRenderingContext2D.clip() +slug: Web/API/CanvasRenderingContext2D/clip +translation_of: Web/API/CanvasRenderingContext2D/clip +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clip()</code></strong> 是 Canvas 2D API 将当前创建的路径设置为当前剪切路径的方法。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.clip();</var> +void <var><em>ctx</em>.clip(fillRule);</var> +void <var><em>ctx</em>.clip(path, fillRule);</var> +</pre> + +<h3 id="参数">参数</h3> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;"></p> + +<dl> + <dt><code>fillRule</code></dt> + <dd>这个算法判断一个点是在路径内还是在路径外。<br> + 允许的值： + <ul> + <li><code><strong>"nonzero</strong></code>": <a href="http://en.wikipedia.org/wiki/Nonzero-rule">非零环绕原则</a>，默认的原则。</li> + <li><code><strong>"evenodd"</strong></code>: <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">奇偶环绕原则</a>。</li> + </ul> + </dd> + <dt><code>path</code></dt> + <dd>需要剪切的 {{domxref("Path2D")}} 路径。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_clip_方法">使用 <code>clip</code> 方法</h3> + +<p>这是一段简单的代码片段，使用 <code>clip</code> 方法创建剪切区域。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +// Create clipping region +ctx.arc(100, 100, 75, 0, Math.PI*2, false); +ctx.clip(); + +ctx.fillRect(0, 0, 100,100); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.arc(100, 100, 75, 0, Math.PI*2, false); +ctx.clip(); +ctx.fillRect(0, 0, 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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clip", "CanvasRenderingContext2D.clip")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Path parameter</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop(31) }}</td> + <td>{{ CompatNo }}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Path parameter</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile(31) }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.html new file mode 100644 index 0000000000..8446adbac8 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.html @@ -0,0 +1,160 @@ +--- +title: CanvasRenderingContext2D.closePath() +slug: Web/API/CanvasRenderingContext2D/closePath +translation_of: Web/API/CanvasRenderingContext2D/closePath +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.closePath()</code></strong> 是 Canvas 2D API 将笔点返回到当前子路径起始点的方法。它尝试从当前点到起始点绘制一条直线。 如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.closePath();</var> +</pre> + +<h2 id="示例">示例</h2> + +<h3 id="使用_closePath_方法">使用 <code>closePath</code> 方法</h3> + +<p>这是一段使用 <code>closePath</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[8]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.beginPath(); +ctx.moveTo(20,20); +ctx.lineTo(200,20); +ctx.lineTo(120,120); +ctx.closePath(); // draws last line of the triangle +ctx.stroke(); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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" style="height:140px;"> +ctx.beginPath(); +ctx.moveTo(20,20); +ctx.lineTo(200,20); +ctx.lineTo(120,120); +ctx.closePath(); // draws last line of the triangle +ctx.stroke();</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, 400) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.beginPath()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.html new file mode 100644 index 0000000000..a02adf6183 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.html @@ -0,0 +1,107 @@ +--- +title: CanvasRenderingContext2D.createImageData() +slug: Web/API/CanvasRenderingContext2D/createImageData +tags: + - API + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/createImageData +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createImageData()</code></strong> 是 Canvas 2D API 创建一个新的、空白的、指定大小的 {{domxref("ImageData")}} 对象。 所有的像素在新对象中都是透明的。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">ImageData <var><em>ctx</em>.createImageData(width, height);</var> +ImageData <var><em>ctx</em>.createImageData(imagedata);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>width</code></dt> + <dd>{{domxref("ImageData")}} 新对象的宽度。</dd> + <dt><code>height</code></dt> + <dd>{{domxref("ImageData")}} 新对象的高度。</dd> + <dt><code>imagedata</code></dt> + <dd>从现有的 {{domxref("ImageData")}} 对象中，复制一个和其宽度和高度相同的对象。图像自身不允许被复制。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>指定了宽度和高度的，新的 {{domxref("ImageData")}} 对象。 新对象使用透明的像素进行填充。</p> + +<h3 id="抛出错误">抛出错误</h3> + +<dl> + <dt><code>IndexSizeError</code></dt> + <dd>如果宽度或者高度变量值为零，会抛出此异常。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_createImageData_方法">使用 <code>createImageData</code> 方法</h3> + +<p>这是一段简单地使用 <code>createImageData</code> 方法的代码片段。 获取更多信息，请看 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">canvas像素控制</a> 和 {{domxref("ImageData")}} 对象。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.rect(10, 10, 100, 100); +ctx.fill(); + +console.log(ctx.createImageData(100, 100)); +// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] } +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createimagedata", "CanvasRenderingContext2D.createImageData")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.createImageData")}}</p> + +<h3 id="兼容性注解">兼容性注解</h3> + +<ul> + <li>从 {{geckoRelease("5.0")}}开始： + <ul> + <li>如果矩形小于指定的1个像素，<code style="font-style: normal;">createImageData()</code> 会返回图像数据至少1个像素值。</li> + <li>当调用 <code style="font-style: normal;">createImageData()</code> 指定非限制值时，会抛出<code style="font-style: normal;">NOT_SUPPORTED_ERR</code> exception异常。</li> + <li><code>createImageData()</code> 根据规定处理负数变量，会围绕对称轴翻转矩形区域。</li> + </ul> + </li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}.</li> + <li>{{domxref("ImageData")}}</li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">canvas像素控制</a></li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.html new file mode 100644 index 0000000000..d7e9536d37 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.html @@ -0,0 +1,156 @@ +--- +title: CanvasRenderingContext2D.createLinearGradient() +slug: Web/API/CanvasRenderingContext2D/createLinearGradient +translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createLinearGradient()</code></strong>方法创建一个沿参数坐标指定的直线的渐变。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14681/mdn-canvas-linearGradient.png" style="height: 121px; width: 264px;"></p> + +<p>该方法返回一个线性 {{domxref("CanvasGradient")}}对象。想要应用这个渐变，需要把这个返回值赋值给 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 或者 {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">CanvasGradient <var><em>ctx</em>.createLinearGradient(x0, y0, x1, y1);</var> +</pre> + +<p><code>createLinearGradient()</code> 方法需要指定四个参数，分别表示渐变线段的开始和结束点。</p> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>x0</code></dt> + <dd>起点的 x 轴坐标。</dd> + <dt><code>y0</code></dt> + <dd>起点的 y 轴坐标。</dd> + <dt><code>x1</code></dt> + <dd>终点的 x 轴坐标。</dd> + <dt><code>y1</code></dt> + <dd>终点的 y 轴坐标。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt>{{domxref("CanvasGradient")}}</dt> + <dd>一个根据指定线路初始化的线性<code> </code><span style="font-family: consolas,monaco,andale mono,monospace;"><code>CanvasGradient</code> 对象。</span></dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用线性渐变填充一个矩形">使用线性渐变填充一个矩形</h3> + +<p>这个例子使用<code>createLinearGradient()</code> 方法初始化了一个线性渐变。在这个线性渐变中添加了三种色彩。最后，这个渐变被赋值给上下文对应的属性，实现了对矩形的填充。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="notranslate">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +// Create a linear gradient +// The start gradient point is at x=20, y=0 +// The end gradient point is at x=220, y=0 +var gradient = ctx.createLinearGradient(20,0, 220,0); + +// Add three color stops +gradient.addColorStop(0, 'green'); +gradient.addColorStop(.5, 'cyan'); +gradient.addColorStop(1, 'green'); + +// Set the fill style and draw a rectangle +ctx.fillStyle = gradient; +ctx.fillRect(20, 20, 200, 100);</pre> + +<h4 id="结果">结果</h4> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="编辑" /> + <input id="reset" type="button" value="重置" /> +</div> +<textarea id="code" class="playable-code"> +var gradient = ctx.createLinearGradient(0,0,200,0); +gradient.addColorStop(0,"green"); +gradient.addColorStop(1,"white"); +ctx.fillStyle = gradient; +ctx.fillRect(10,10,200,100);</textarea> +</pre> + +<pre class="brush: js notranslate">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('Filling_a_rectangle_with_a_linear_gradient', 700, 180) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}</p> + + + +<h3 id="Gecko特性说明">Gecko特性说明</h3> + +<ul> + <li>自 Gecko 2.0 {{geckoRelease("2.0")}}开始，参数指定了极值会抛出<code>NOT_SUPPORTED_ERR</code> 而不再是之前的 <code>SYNTAX_ERR </code>异常。</li> +</ul> + +<h2 id="参见"><br> + <span style="">参见</span></h2> + +<div id="compat-mobile"></div> + +<ul> + <li>接口定义： {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.html new file mode 100644 index 0000000000..fd6c4d7d0e --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.html @@ -0,0 +1,200 @@ +--- +title: CanvasRenderingContext2D.createPattern() +slug: Web/API/CanvasRenderingContext2D/createPattern +translation_of: Web/API/CanvasRenderingContext2D/createPattern +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createPattern() </code></strong>是 Canvas 2D API 使用指定的图像 ({{domxref("CanvasImageSource")}})创建模式的方法。 它通过repetition参数在指定的方向上重复元图像。此方法返回一个{{domxref("CanvasPattern")}}对象。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">CanvasPattern <var><em>ctx</em>.createPattern(image, repetition);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>image</code></dt> + <dd>作为重复图像源的 {{domxref("CanvasImageSource")}} 对象。可以是下列之一： + <ul> + <li>{{domxref("HTMLImageElement")}} ({{HTMLElement("img")}}),</li> + <li>{{domxref("HTMLVideoElement")}} ({{HTMLElement("video")}}),</li> + <li>{{domxref("HTMLCanvasElement")}} ({{HTMLElement("canvas")}}),</li> + <li>{{domxref("CanvasRenderingContext2D")}},</li> + <li>{{domxref("ImageBitmap")}},</li> + <li>{{domxref("ImageData")}},</li> + <li>{{domxref("Blob")}}.</li> + </ul> + </dd> + <dt><code>repetition</code></dt> + <dd>{{domxref("DOMString")}}，指定如何重复图像。允许的值有： + <ul> + <li><code>"repeat"</code> (both directions),</li> + <li><code>"repeat-x"</code> (horizontal only),</li> + <li><code>"repeat-y"</code> (vertical only), </li> + <li><code>"no-repeat"</code> (neither).</li> + </ul> + 如果为空字符串 (<code>''</code>) 或 {{jsxref("null")}} (但不是 {{jsxref("undefined")}})，repetition将被当作"repeat"。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt>{{domxref("CanvasPattern")}}</dt> + <dd>描述模式的不透明对象</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用createPattern方法">使用<code>createPattern</code>方法</h3> + +<p>这是一段简单的代码片段，使用 <span style="font-family: consolas,monaco,andale mono,monospace;">createPattern 方法创建一个指定图像和重复的</span>{{domxref("CanvasPattern")}} 对象。创建完成后，可以使用{{domxref("CanvasPattern.setTransform()")}}方法对图案进行变形。如示例所示，你可以把此模式赋值给当前的{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}，当你使用{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，会在 canvas 上绘制出效果。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[7]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +var img = new Image(); +img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; +img.onload = function() { + var pattern = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = pattern; + ctx.fillRect(0,0,400,400); +}; +</pre> + +<p>编辑以下代码并在线查看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" style="height:120px"> +var img = new Image(); +img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; +img.onload = function() { + var pattern = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = pattern; + ctx.fillRect(0,0,400,400); +};</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, 380) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createpattern", "CanvasRenderingContext2D.createPattern")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML Canvas 2D Context W3C', "#dom-context-2d-createpattern", "CanvasRenderingContext2D.createPattern")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasPattern")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.html new file mode 100644 index 0000000000..df820f2cbb --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.html @@ -0,0 +1,147 @@ +--- +title: CanvasRenderingContext2D.createRadialGradient() +slug: Web/API/CanvasRenderingContext2D/createRadialGradient +translation_of: Web/API/CanvasRenderingContext2D/createRadialGradient +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createRadialGradient()</code></strong> 是 Canvas 2D API 根据参数确定两个圆的坐标，绘制放射性渐变的方法。这个方法返回 {{domxref("CanvasGradient")}}。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">CanvasGradient <var><em>ctx</em>.createRadialGradient(x0, y0, r0, x1, y1, r1);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>x0</code></dt> + <dd>开始圆形的 x 轴坐标。</dd> + <dt><code>y0</code></dt> + <dd>开始圆形的 y 轴坐标。</dd> + <dt>r0</dt> + <dd>开始圆形的半径。</dd> + <dt><code>x1</code></dt> + <dd>结束圆形的 x 轴坐标。</dd> + <dt><code>y1</code></dt> + <dd>结束圆形的 y 轴坐标。</dd> + <dt>r1</dt> + <dd>结束圆形的半径。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt>{{domxref("CanvasGradient")}}</dt> + <dd>由两个指定的圆初始化的放射性 <code>CanvasGradient</code> 对象。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_createRadialGradient_方法">使用 <code>createRadialGradient</code> 方法</h3> + +<p>这是一段简单的代码片段， 使用 <code>createRadialGradient</code> 方法创建一个指定了开始和结束圆的 {{domxref("CanvasGradient")}} 对象。 一旦创建，你可以使用 {{domxref("CanvasGradient.addColorStop()")}} 方法根据指定的偏移和颜色定义一个新的终止。你可以将当前的{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}设置成此渐变， 当使用{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，会在canvas上绘制出效果， 如示例所示。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4] notranslate">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +var gradient = ctx.createRadialGradient(100,100,100,100,100,0); +gradient.addColorStop(0,"white"); +gradient.addColorStop(1,"green"); +ctx.fillStyle = gradient; +ctx.fillRect(0,0,200,200); +</pre> + +<p>修改下面的代码并在线查看 canvas的变化：</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><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"> +var gradient = ctx.createRadialGradient(100,100,100,100,100,0); +gradient.addColorStop(0,"white"); +gradient.addColorStop(1,"green"); +ctx.fillStyle = gradient; +ctx.fillRect(0,0,200,200);</textarea> +</pre> + +<pre class="brush: js notranslate">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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createradialgradient", "CanvasRenderingContext2D.createRadialGradient")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.createRadialGradient")}}</p> + +<div id="compat-mobile"></div> + +<h3 id="Gecko-specific_注解">Gecko-specific 注解</h3> + +<ul> + <li>从 Gecko 2.0 {{geckoRelease("2.0")}}开始， 指定非限制的值会抛出 <code>NOT_SUPPORTED_ERR</code> ，用来替代 <code>SYNTAX_ERR。</code></li> + <li>从 Gecko 5.0 {{geckoRelease("5.0")}}开始，指定一个负的半径会抛出 <code>INDEX_SIZE_ERR。</code></li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/currenttransform/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/currenttransform/index.html new file mode 100644 index 0000000000..75302a7302 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/currenttransform/index.html @@ -0,0 +1,178 @@ +--- +title: CanvasRenderingContext2D.currentTransform +slug: Web/API/CanvasRenderingContext2D/currentTransform +translation_of: Web/API/CanvasRenderingContext2D/currentTransform +--- +<div>{{APIRef()}} {{SeeCompatTable}}</div> + +<p><code style="font-style: normal;"><strong>CanvasRenderingContext2D</strong></code><strong><code>.currentTransform</code></strong> 属性，表示当前变换的矩阵。可以通过Canvas2D API 返回或者赋值为{{domxref("SVGMatrix")}}对象。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>ctx.currentTransform [= value];</var> +</pre> + +<dl> + <dt><code>参考</code></dt> + <dd>{{domxref("SVGMatrix")}} 对象表示当前变换的矩阵。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用currentTransform_的方式"><code><font face="Open Sans, sans-serif">使用</font>currentTransform</code> 的方式</h3> + +<p>这是一段简单的代码片段，使用<span style="font-family: consolas,monaco,andale mono,monospace;">currentTransform属性设置变换矩阵。</span></p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +var matrix = ctx.currentTransform; +matrix.a = 1; +matrix.b = 1; +matrix.c = 0; +matrix.d = 1; +matrix.e = 0; +matrix.f = 0; +ctx.currentTransform = matrix; +ctx.fillRect(0,0,100,100); +</pre> + +<p>修改下面的代码并在线查看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" style="height:150px"> +var matrix = ctx.currentTransform; +matrix.a = 1; +matrix.b = 1; +matrix.c = 0; +matrix.d = 1; +matrix.e = 0; +matrix.f = 0; +ctx.currentTransform = matrix; +ctx.fillRect(0,0,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, 420) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-currenttransform", "CanvasRenderingContext2D.currentTransform")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatNo}}<br> + {{bug(928150)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Chrome-specific注解">Chrome-specific注解</h3> + +<ul> + <li>此特征默认无效。需要启用<code>ExperimentalCanvasFeatures</code> 标志进行测试。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasPattern")}}</li> + <li>{{domxref("SVGMatrix")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.html new file mode 100644 index 0000000000..32f4eb6d55 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.html @@ -0,0 +1,103 @@ +--- +title: CanvasRenderingContext2D.direction +slug: Web/API/CanvasRenderingContext2D/direction +tags: + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/direction +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.direction</code></strong> 是Canvas 2D API 用来在绘制文本时，描述当前文本方向的属性。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.direction = "ltr" || "rtl" || "inherit";</var> +</pre> + +<h3 id="选项">选项</h3> + +<p>有效值:</p> + +<dl> + <dt>ltr</dt> + <dd>文本方向从左向右。</dd> + <dt>rtl</dt> + <dd>文本方向从右向左。</dd> + <dt>inherit</dt> + <dd>根据情况继承 {{HTMLElement("canvas")}} 元素或者 {{domxref("Document")}} 。</dd> +</dl> + +<p>默认值是<code>inherit。</code></p> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_direction_property" name="Using_the_direction_property">使用<code>direction</code> 属性</h3> + +<p>这是一段简单的代码片段，对文本设置不同的direction数值。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = '48px serif'; +ctx.fillText('Hi!', 150, 50); +ctx.direction = 'rtl'; +ctx.fillText('Hi!', 150, 130);</pre> + + + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="550" height="500"></canvas> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = '48px serif'; +ctx.fillText('Hi!', 150, 50); +ctx.direction = 'rtl'; +ctx.fillText('Hi!', 150, 130);</pre> +</div> + +<h4 id="结果">结果</h4> + +<p>{{ EmbedLiveSample('Playable_code', 700, 180) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求。</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.direction")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html new file mode 100644 index 0000000000..1dc87fb0b2 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html @@ -0,0 +1,133 @@ +--- +title: CanvasRenderingContext2D.drawFocusIfNeeded() +slug: Web/API/CanvasRenderingContext2D/drawFocusIfNeeded +translation_of: Web/API/CanvasRenderingContext2D/drawFocusIfNeeded +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawFocusIfNeeded()</code></strong> 是 Canvas 2D API 用来给当前路径或特定路径绘制焦点的方法，如果给定的元素获取了焦点。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">void <var><em>ctx</em>.drawFocusIfNeeded(element);<var> +void <var><em>ctx</em>.drawFocusIfNeeded(path, element);</var></var></var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>element</dt> + <dd>是否需要设置焦点的元素。</dd> + <dt><code>path</code></dt> + <dd>{{domxref("Path2D")}} 路径。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_drawFocusIfNeeded_方法">使用 <code>drawFocusIfNeeded</code> 方法</h3> + +<p>这是一段使用 <code>drawFocusIfNeeded</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"> + <input id="button" type="range" min="1" max="12"> +</canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[9] notranslate">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var button = document.getElementById("button"); + +button.focus(); + +ctx.beginPath(); +ctx.rect(10, 10, 30, 30); +ctx.drawFocusIfNeeded(button); +</pre> + +<p>修改下面的代码并在线查看 canvas的变化：</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><canvas id="canvas" width="400" height="200" class="playable-canvas"> +<input id="button" type="range" min="1" max="12"> +</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.beginPath(); +ctx.rect(10, 10, 30, 30); +ctx.drawFocusIfNeeded(button);</textarea> +</pre> + +<pre class="brush: js notranslate">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var button = document.getElementById("button"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; +button.focus(); + +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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawfocusifneeded", "CanvasRenderingContext2D.drawFocusIfNeeded")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.drawFocusIfNeeded")}}</p> + +<h3 id="兼容性注解">兼容性注解</h3> + +<ul> + <li>[1] 在 Gecko 28 {{geckoRelease(28)}}中， 此方法通过 "<code>drawSystemFocusRing</code>" 实现， 但是在 Gecko 29 {{geckoRelease(29)}}中已经改名。</li> + <li>[1] 在 Gecko 32 {{geckoRelease(32)}} 之前，此方法默认是无效的，受控于 flag "<code>canvas.focusring.enabled</code>"标识。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.html new file mode 100644 index 0000000000..b0d477e9e8 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.html @@ -0,0 +1,277 @@ +--- +title: CanvasRenderingContext2D.drawImage() +slug: Web/API/CanvasRenderingContext2D/drawImage +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Refer +translation_of: Web/API/CanvasRenderingContext2D/drawImage +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API 中的 <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawImage()</code></strong> 方法提供了多种方式在Canvas上绘制图像。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.drawImage(image, dx, dy);</var> +void <var><em>ctx</em>.drawImage(image, dx, dy, dWidth, dHeight);</var> +void <var><em>ctx</em>.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);</var> +</pre> + +<p><img alt="drawImage" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right;"></p> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>image</code></dt> + <dd>绘制到上下文的元素。允许任何的 canvas 图像源({{domxref("CanvasImageSource")}})，例如：{{domxref("CSSImageValue")}}，{{domxref("HTMLImageElement")}}，{{domxref("SVGImageElement")}}，{{domxref("HTMLVideoElement")}}，{{domxref("HTMLCanvasElement")}}，{{domxref("ImageBitmap")}} 或者{{domxref("OffscreenCanvas")}}。</dd> + <dt><code>sx</code>{{optional_inline}}</dt> + <dd>需要绘制到目标上下文中的，<code>image</code>的矩形（裁剪）选择框的左上角 X 轴坐标。</dd> + <dt><code>sy</code>{{optional_inline}}</dt> + <dd>需要绘制到目标上下文中的，<code>image</code>的矩形（裁剪）选择框的左上角 Y 轴坐标。</dd> + <dt><code>sWidth</code>{{optional_inline}}</dt> + <dd>需要绘制到目标上下文中的，<code>image</code>的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的<code>sx</code>和<code>sy</code>开始，到<code>image</code>的右下角结束。</dd> + <dt><code>sHeight</code>{{optional_inline}}</dt> + <dd>需要绘制到目标上下文中的，<code>image</code>的矩形（裁剪）选择框的高度。</dd> + <dt><code>dx</code></dt> + <dd><code>image</code>的左上角在目标canvas上 X 轴坐标。</dd> + <dt><code>dy</code></dt> + <dd><code>image</code>的左上角在目标canvas上 Y 轴坐标。</dd> + <dt><code>dWidth</code>{{optional_inline}}</dt> + <dd><code>image</code>在目标canvas上绘制的宽度。 允许对绘制的<code>image</code>进行缩放。 如果不说明， 在绘制时<code>image</code>宽度不会缩放。</dd> + <dt><code>dHeight</code>{{optional_inline}}</dt> + <dd><code>image</code>在目标canvas上绘制的高度。 允许对绘制的<code>image</code>进行缩放。 如果不说明， 在绘制时<code>image</code>高度不会缩放。</dd> +</dl> + +<h3 id="抛出异常">抛出异常</h3> + +<dl> + <dt><code>INDEX_SIZE_ERR</code></dt> + <dd>如果 canvas 或者图像矩形区域的宽度或高度为0 。</dd> + <dt><code>INVALID_STATE_ERR</code></dt> + <dd>图像没有数据。</dd> + <dt><code>TYPE_MISMATCH_ERR</code></dt> + <dd>提供的原始元素不支持。</dd> + <dt><code>NS_ERROR_NOT_AVAILABLE</code></dt> + <dd>图像尚未加载。使用<code>.complete === true</code>和<code>.onload</code>确定何时准备就绪。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_drawImage_方法">使用 <code>drawImage</code> 方法</h3> + +<p>这是一段使用 <code>drawImage</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +<div style="display:none;"> + <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" + width="300" height="227"> +</div> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var image = document.getElementById('source'); + +ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); +</pre> + +<div class="hidden"> +<h2 id="Drawing_an_image_to_the_canvas">Drawing_an_image_to_the_canvas</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><canvas id="canvas"></canvas> +<div style="display:none;"> + <img id="source" + src="https://mdn.mozillademos.org/files/5397/rhino.jpg" + width="300" height="227"> +</div></pre> + + + +<h3 id="JavaScript_2">JavaScript</h3> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +const image = document.getElementById('source'); + +image.addEventListener('load', e => { + ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); +}); +</pre> +</div> + +<h4 id="结果">结果</h4> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div style="display:none;"> + <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"> +</div> +<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.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var image = document.getElementById('source'); +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('Drawing_an_image_to_the_canvas', 700, 180) }}</p> + +<h3 id="理解源元素大小">理解源元素大小</h3> + +<p><code>drawImage()</code>方法在绘制时使用源元素的CSS大小。</p> + +<p>例如，如果加载图像并在其构造函数中指定可选的大小参数，则必须使用所创建实例的<code>naturalWidth</code>和<code>naturalHeight</code>属性来正确计算裁剪和缩放区域等内容，而不是<code>element.width</code>和<code>element.height</code>。如果元素是{{htmlelement("video")}} 元素，则<code>videoWidth</code>和<code>videoHeight</code>也是如此，依此类推。</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><code><canvas id="canvas"></canvas></code></pre> + +<h4 id="JavaScript_3">JavaScript</h4> + +<pre class="brush: js"><code>const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +const image = new Image(60, 45); // Using optional size for image +image.onload = drawImageActualSize; // Draw when image has loaded + +// Load an image of intrinsic size 300x227 in CSS pixels +image.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; + +function drawImageActualSize() { + // Use the intrinsic size of image in CSS pixels for the canvas element + canvas.width = this.naturalWidth; + canvas.height = this.naturalHeight; + + // Will draw the image as 300x227, ignoring the custom size of 60x45 + // given in the constructor + ctx.drawImage(this, 0, 0); + + // To use the custom size we'll have to specify the scale parameters + // using the element's width and height properties - lets draw one + // on top in the corner: + ctx.drawImage(this, 0, 0, this.width, this.height); +}</code> +</pre> + +<div class="hidden"> +<h2 id="Understanding_source_element_size">Understanding_source_element_size</h2> + +<h3 id="HTML_4">HTML</h3> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h3 id="JavaScript_4">JavaScript</h3> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +const image = new Image(60, 45); // Using optional size for image +image.onload = drawImageActualSize; // Draw when image has loaded + +// Load an image of intrinsic size 300x227 in CSS pixels +image.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; + +function drawImageActualSize() { + // Use the intrinsic size of image in CSS pixels for the canvas element + canvas.width = this.naturalWidth; + canvas.height = this.naturalHeight; + + // Will draw the image as 300x227, ignoring the custom size of 60x45 + // given in the constructor + ctx.drawImage(this, 0, 0); + + // To use the custom size we'll have to specify the scale parameters + // using the element's width and height properties - lets draw one + // on top in the corner: + ctx.drawImage(this, 0, 0, this.width, this.height); +} +</pre> +</div> + +<h4 id="结果_2">结果</h4> + +<p>{{EmbedLiveSample('Understanding_source_element_size', 700, 260)}}</p> + +<h2 id="规范说明">规范说明</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.CanvasRenderingContext2D.drawImage")}}</p> + +<h3 id="兼容性注解">兼容性注解</h3> + +<ul> + <li>在 Gecko 5.0 {{geckoRelease("5.0")}}中，支持通过给 sw 和 sh 赋负值，对图像进行翻转。</li> + <li>从 {{geckoRelease("5.0")}} 开始，<code>drawImage()</code> 按照规范处理负参数，沿着合适的轴翻转矩形。</li> + <li>从{{geckoRelease("5.0")}}开始，当<span style="font-family: consolas,monaco,andale mono,monospace;">drawImage()</span>调用 <code>null</code> 或者 <code>undefined</code> 图像时，会抛出 <code>TYPE_MISMATCH_ERR</code> 异常。</li> + <li>在 Gecko 7.0 {{ geckoRelease("7.0") }}之前， 如果坐标值是非规定值或者是0，Firefox 会抛出一个异常。 按照规范描述，这种情况不会再发生。</li> + <li>Gecko 9.0 {{ geckoRelease("9.0") }}现在完全支持 CORS 跨域绘制图像，不需要<a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">污染的 canvas</a>.</li> + <li>Gecko 11.0 {{ geckoRelease("11.0") }} 现在允许 SVG 作为图像被绘制到 canvas ，不需要 <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">污染的 canvas</a>.</li> +</ul> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>当<code>drawImage()</code>需要在{{domxref("HTMLVideoElement")}}工作时，仅当{{domxref("HTMLMediaElement.readyState")}}大于1时<code>drawImage()</code>才能正常工作。</li> + <li>在绘制，裁剪和/或缩放时，<code>drawImage()</code> 将始终使用CSS像素中源元素的固有尺寸。</li> + <li><code>drawImage()</code>将忽略图像中的所有EXIF元数据，包括方向。 此行为在iOS设备上尤其麻烦。 您应该自己检测方向并使用<code>rotate()</code>使其正确。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawwidgetasonscreen/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/drawwidgetasonscreen/index.html new file mode 100644 index 0000000000..4ea928da29 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawwidgetasonscreen/index.html @@ -0,0 +1,89 @@ +--- +title: CanvasRenderingContext2D.drawWidgetAsOnScreen() +slug: Web/API/CanvasRenderingContext2D/drawWidgetAsOnScreen +tags: + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/drawWidgetAsOnScreen +--- +<div>{{APIRef}} {{non-standard_header}}</div> + +<div>这个内部使用非标准的Canvas 2D API 的方法<code><strong>CanvasRenderingContext2D.drawWidgetAsOnScreen()为Canvas（画布）上的窗口提供了根部件。不像</strong></code>{{domxref("CanvasRenderingContext2D.drawWindow", "drawWindow()")}}这个API，它使用操作系统来获取屏幕上部件的快照而不是从Gecko自己的组合中读取</div> + +<p> </p> + +<p>这个API用在Web内容上。它只支持Windows系统中Chrome进程中使用OMTC的小部件</p> + +<h2 id="句法">句法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.</var>drawWidgetAsOnScreen<var>(window);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>window</code></dt> + <dd> {{domxref("Window")}} 提供.</dd> +</dl> + +<h2 id="说明">说明</h2> + +<p>不是当前规范或者草案的一部分. 这是一个内部使用的无标准的API.</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(41)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(41)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}。</li> + <li>{{domxref("CanvasRenderingContext2D.drawWindow()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawwindow/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/drawwindow/index.html new file mode 100644 index 0000000000..51c79e5106 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawwindow/index.html @@ -0,0 +1,105 @@ +--- +title: CanvasRenderingContext2D.drawWindow() +slug: Web/API/CanvasRenderingContext2D/drawWindow +translation_of: Web/API/CanvasRenderingContext2D/drawWindow +--- +<div>{{APIRef}} {{deprecated_header}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawWindow()</code></strong> 是 Canvas 2D API 在 <code>canvas </code>内部画布上渲染一个窗体区域的已弃用的非标准接口。 用来渲染窗口可视区的内容，忽略窗口的剪切和滚动。</p> + +<p>这个API 不能在 Web 内容中应用。它是一个同步的 API，并且由于它不能对裂变的跨域 <code>iframe</code> （译者注：我也不知道这裂变是个啥），如果你的浏览器扩展中使用这一 API 的话，建议你改用 {{WebExtAPIRef('tabs.captureTab')}} 。如果你的代码是针对 chrome 的话，用来自父进程的 <a href="https://searchfox.org/mozilla-central/rev/9b282b34b5/dom/chrome-webidl/WindowGlobalActors.webidl#81-98">WindowGlobalParent.drawSnapshot</a> 接口可能会更合适。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><span>void </span><var><em>ctx</em>.drawWindow(window, x, y, w, h, bgColor[, flags]);</var></pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>window</code></dt> + <dd>需要渲染的{{domxref("Window")}} 。</dd> + <dt>x</dt> + <dd>窗体的 X 坐标。</dd> + <dt>y</dt> + <dd>窗体的 Y 坐标。</dd> + <dt>w</dt> + <dd>窗体的宽度。</dd> + <dt>h</dt> + <dd>窗体的高度。</dd> + <dt><code>bgColor</code></dt> + <dd>{{domxref("DOMString")}}，描述当窗体渲染到canvas之前，进行填充的颜色。 颜色可以是透明/半透明。 它被赋值为CSS 颜色字符串（例如： <code>rgb()</code> 或者 <code>rgba()）。</code><br> + 注意： + <ul> + <li>如果"<code>rgba(0,0,0,0)</code>"用来当背景色， 图像透明的地方窗体也是透明的。</li> + <li>顶级的预览文档通常不会是透明的，因为用户的背景色偏好设置会被应用。但是{{HTMLElement("iframe", "iframes")}} 是透明的，如果页面没有设置背景。</li> + <li>如果不透明的颜色做为背景色， 渲染速度会更快，因为我们不需要计算窗体的透明度。 </li> + </ul> + </dd> + <dt>flags {{optional_inline}}</dt> + <dd>用来更好的控制 <code>drawWindow</code> 。 Flags 可以使用或运算符进行连接。 + <table class="standard-table"> + <tbody> + <tr> + <td class="header">常量</td> + <td class="header">值</td> + <td class="header">描述</td> + </tr> + <tr> + <td><code>DRAWWINDOW_DRAW_CARET</code></td> + <td><code>0x01</code></td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">绘制时，如果被占用，显示插入符。</span></td> + </tr> + <tr> + <td><code>DRAWWINDOW_DO_NOT_FLUSH</code></td> + <td><code>0x02</code></td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">不要清空待定的布局通知，否则会被批量挂起。</span></td> + </tr> + <tr> + <td><code>DRAWWINDOW_DRAW_VIEW</code></td> + <td><code>0x04</code></td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">绘制滚动条，并滚动当前的视口。</span></td> + </tr> + <tr> + <td><code>DRAWWINDOW_USE_WIDGET_LAYERS</code></td> + <td><code>0x08</code></td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">使用小部件层进行有效的管理。这意味着可以使用硬件加速， 但是实际上会变慢，并且降低品质。不管怎样，它都会更准确地反映已经渲染到屏幕上的像素。</span></td> + </tr> + <tr> + <td><code>DRAWWINDOW_ASYNC_DECODE_IMAGES</code></td> + <td><code>0x10</code></td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">不需要同步解码图像 - 绘制我们已经有的。</span></td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>这个方法在canvas中绘制了一个DOM 窗口的内容快照。例子：</p> + +<pre class="brush: js notranslate">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); +</pre> + +<p>以像素为单位，相对可视区左上角的矩形框内，使用白色作为背景色，在canvas中绘制当前窗口的内容。如果指定"<code style="font-style: normal;">rgba(255,255,255,0)</code>" 作为颜色，则内容的背景色是透明的（造成绘制速度变慢）。</p> + +<p>使用纯白色"<code style="font-style: normal;">rgb(255,255,255)</code>"或者透明颜色之外的任何背景，都不是一个好的主意。就像所有浏览器要做的，多数网站期望他们界面透明的部分绘制到白色背景上。</p> + +<p>使用这个方法，可以使用任意内容填充隐藏的IFRAME（例如：CSS-styled HTML text 或者 SVG）并绘制到canvas中。为了适应当前的变形，它会缩放、旋转。</p> + +<p>Ted Mielczarek 的 <a class="external external-icon" href="http://ted.mielczarek.org/code/mozilla/tabpreview/">标签预览</a> 扩展使用这种技术，在 chrome 中提供网页的缩略图。源代码可以作为参考。</p> + +<h2 id="规范描述">规范描述</h2> + +<p>目前的规范或者草案不包含此章节。这是一个不标准的、仅供内部使用的API。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.CanvasRenderingContext2D.drawWindow")}}<br> + <span>参见</span></p> + +<div id="compat-mobile"></div> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html new file mode 100644 index 0000000000..d46c4acb87 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html @@ -0,0 +1,140 @@ +--- +title: CanvasRenderingContext2D.ellipse() +slug: Web/API/CanvasRenderingContext2D/ellipse +tags: + - API + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/ellipse +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.ellipse()</code></strong> 是 Canvas 2D API 添加椭圆路径的方法。椭圆的圆心在（x,y）位置，半径分别是<em>radiusX</em> 和 <em>radiusY</em> ，按照<em>anticlockwise</em>（默认顺时针）指定的方向，从 <em>startAngle </em> 开始绘制，到 <em>endAngle</em> 结束。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">void <var><em>ctx</em>.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>椭圆圆心的 x 轴坐标。</dd> + <dt><code>y</code></dt> + <dd>椭圆圆心的 y 轴坐标。</dd> + <dt><code>radius</code>X</dt> + <dd>椭圆长轴的半径。</dd> + <dt><code>radius</code>Y</dt> + <dd>椭圆短轴的半径。</dd> + <dt><code>rotation</code></dt> + <dd>椭圆的旋转角度，以弧度表示(<strong>非角度度数</strong>)。</dd> + <dt><code>startAngle</code></dt> + <dd>将要绘制的起始点角度，从 x 轴测量，以弧度表示(<strong>非角度度数</strong>)。</dd> + <dt><code>endAngle</code></dt> + <dd>椭圆将要绘制的结束点角度，以弧度表示(<strong>非角度度数</strong>)。</dd> + <dt><code>anticlockwise</code> {{optional_inline}}</dt> + <dd>{{jsxref("Boolean")}} 选项，如果为 <code>true</code>，逆时针方向绘制椭圆 （逆时针）， 反之顺时针方向绘制。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_ellipse_method" name="Using_the_ellipse_method">使用 <code>ellipse</code> 方法</h3> + +<p>这是一段绘制椭圆的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="notranslate"><code>var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.setLineDash([]); +ctx.beginPath(); +ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); //倾斜45°角 +ctx.stroke(); +ctx.setLineDash([5]); +ctx.moveTo(0,200); +ctx.lineTo(200,0); +ctx.stroke();</code></pre> + +<p>修改下面的代码并在线查看 canvas 的变化（如果椭圆没有绘制，请在兼容性列表中检查你的浏览器是否支持）：</p> + +<div style="display: none;"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><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.setLineDash([]); +ctx.beginPath(); +ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); //倾斜45°角 +ctx.stroke(); +ctx.setLineDash([5]); +ctx.moveTo(0,200); +ctx.lineTo(200,0); +ctx.stroke();</textarea> +</pre> + +<pre class="brush: js notranslate">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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.ellipse")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.html new file mode 100644 index 0000000000..a7dadcff17 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.html @@ -0,0 +1,184 @@ +--- +title: CanvasRenderingContext2D.fill() +slug: Web/API/CanvasRenderingContext2D/fill +translation_of: Web/API/CanvasRenderingContext2D/fill +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fill()</code></strong> 是 Canvas 2D API 根据当前的填充样式，填充当前或已存在的路径的方法。采取非零环绕或者奇偶环绕规则。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.fill();</var> +void <var><em>ctx</em>.fill(fillRule);</var> +void <var><em>ctx</em>.fill(path, fillRule);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>fillRule</code></dt> + <dd>一种算法，决定点是在路径内还是在路径外。<br> + 允许的值： + <ul> + <li><code><strong>"nonzero</strong></code>": <a href="http://en.wikipedia.org/wiki/Nonzero-rule">非零环绕规则</a>， 默认的规则。</li> + <li><code><strong>"evenodd"</strong></code>: <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">奇偶环绕规则</a>。</li> + </ul> + </dd> + <dt><code>path</code></dt> + <dd>需要填充的{{domxref("Path2D")}} 路径。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_fill_方法">使用 <code>fill</code> 方法</h3> + +<p>这是一段简单的代码片段， 使用 <code>fill</code> 方法填充路径。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.rect(10, 10, 100, 100); +ctx.fill(); +</pre> + +<p>修改下面的代码并在线查看 canvas 变化：</p> + +<div style="display: none;"> +<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.rect(10, 10, 100, 100); +ctx.fill();</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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Path parameter</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop(31) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Path parameter</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile(31) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.html new file mode 100644 index 0000000000..ddd97227f0 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.html @@ -0,0 +1,179 @@ +--- +title: CanvasRenderingContext2D.fillRect() +slug: Web/API/CanvasRenderingContext2D/fillRect +translation_of: Web/API/CanvasRenderingContext2D/fillRect +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong> 是Canvas 2D API 绘制填充矩形的方法。当前渲染上下文中的<code>fillStyle</code> 属性决定了对这个矩形对的填充样式。<br> + <br> + 这个方法是直接在画布上绘制填充，并不修改当前路径，所以在这个方法后面调用 {{domxref("CanvasRenderingContext2D.fill()", "fill()")}} 或者{{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}方法并不会对这个方法有什么影响。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">void <var><em>ctx</em>.fillRect(x, y, width, height);</var> +</pre> + +<p><code>fillRect()</code>方法绘制一个填充了内容的矩形，这个矩形的开始点（左上点）在<code>(x, y)</code> ，它的宽度和高度分别由<code>width</code> 和 <code>height</code> 确定，填充样式由当前的<code>fillStyle</code> 决定。</p> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>矩形起始点的 x 轴坐标。</dd> + <dt><code>y</code></dt> + <dd>矩形起始点的 y 轴坐标。</dd> + <dt><code>width</code></dt> + <dd>矩形的宽度。</dd> + <dt><code>height</code></dt> + <dd>矩形的高度。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="一个填充矩形的例子">一个填充矩形的例子</h3> + +<p>这个例子使用<code>fillRect()</code>方法绘制了一个用绿色填充的矩形。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>下面绘制的矩形左上顶点在(20, 10)，宽高分别是150和100像素。</p> + +<pre class="notranslate">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +ctx.fillStyle = 'green'; +ctx.fillRect(20, 10, 150, 100);</pre> + +<h4 id="结果">结果</h4> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><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 notranslate">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('A_simple_filled_rectangle', 700, 180) }}</p> + +<h3 id="填充整个画布">填充整个画布</h3> + +<p>下面这个代码片段使用本方法填充了整个画布。这样做通常的目的是在开始绘制其他内容前设置一个背景。为了达到这样的效果，需要让填充的范围和画布的范围相同，需要访问{{HtmlElement("canvas")}}元素的<code>width</code> 和 <code>height</code> 属性。</p> + +<pre class="notranslate">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +ctx.fillRect(0, 0, canvas.width, canvas.height);</pre> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li> + <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.html new file mode 100644 index 0000000000..bf576d7681 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.html @@ -0,0 +1,170 @@ +--- +title: CanvasRenderingContext2D.fillStyle +slug: Web/API/CanvasRenderingContext2D/fillStyle +tags: + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/fillStyle +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong> 是Canvas 2D API 使用内部方式描述颜色和样式的属性。默认值是 <code>#000</code> （黑色）。</p> + +<p>参见 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a> 的 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> 章节。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.fillStyle = color; +</var><var><em>ctx</em>.fillStyle = gradient; +</var><var><em>ctx</em>.fillStyle = pattern;</var> +</pre> + +<h3 id="选项">选项</h3> + +<dl> + <dt><code>color</code></dt> + <dd>{{domxref("DOMString")}} 字符串，被转换成 CSS {{cssxref("<color>")}} 颜色值.</dd> + <dt><code>gradient</code></dt> + <dd>{{domxref("CanvasGradient")}} 对象 （线性渐变或者放射性渐变）.</dd> + <dt><code>pattern</code></dt> + <dd>{{domxref("CanvasPattern")}} 对象 （可重复图像）。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_fillStyle_property" name="Using_the_fillStyle_property">使用 <code>fillStyle</code> 属性设置不同的颜色</h3> + +<p>这是一段简单的代码片段，使用 <code>fillStyle</code> 属性设置不同的颜色。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.fillStyle = "blue"; +ctx.fillRect(10, 10, 100, 100); +</pre> + +<p>修改下面的代码并在线查看canvas的变化：</p> + +<div class="hidden"> +<h6 id="Playable_code" name="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 = "blue"; +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> + +<h3 id="fillStyle_使用_for_循环的例子"><code>fillStyle</code> 使用 <code>for</code> 循环的例子</h3> + +<p>在这个例子中， 我们使用两个 <code>for</code> 循环绘制一个矩形表格，每个单元格都有不同的颜色。 最终的结果图像看起来像屏幕截图，其实没有令人惊叹的事情发生。我们使用两个变量 i 和 j 为每一个单元格生成唯一的RGB颜色，并且只改变红色和绿色的数值。蓝色通道的值是固定不变的。通过修改这些通道，你能生成各种各样的调色板。通过逐步地增加，你能实现类似 Photoshop 的调色板。</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); +for (var i=0;i<6;i++){ + for (var j=0;j<6;j++){ + ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + + Math.floor(255-42.5*j) + ',0)'; + ctx.fillRect(j*25,i*25,25,25); + } +} +</pre> + +<p>结果看起来像是这样的：</p> + +<p>{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p> + +<h2 id="规格描述">规格描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求。</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.fillStyle")}}</p> + +<div id="compat-desktop"></div> + +<h3 id="WebKitBlink-specific_注解">WebKit/Blink-specific 注解</h3> + +<ul> + <li>支持 WebKit- 和 Blink-based 的浏览器中， 有一个不标准的、被反对的方法 <code>ctx.setFillColor()</code> 已经实现。 + + <pre class="brush: js">setFillColor(color, optional alpha); +setFillColor(grayLevel, optional alpha); +setFillColor(r, g, b, a); +setFillColor(c, m, y, k, a); +</pre> + </li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas API</a></li> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>此属性使用的值: + <ul> + <li>{{cssxref("<color>")}} CSS数据类型</li> + <li>{{domxref("CanvasGradient")}} 对象</li> + <li>{{domxref("CanvasPattern")}} 对象</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.html new file mode 100644 index 0000000000..6cbff0639b --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.html @@ -0,0 +1,170 @@ +--- +title: CanvasRenderingContext2D.fillText() +slug: Web/API/CanvasRenderingContext2D/fillText +translation_of: Web/API/CanvasRenderingContext2D/fillText +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillText()</code></strong> 是 Canvas 2D API 在 <em>(x, y)</em>位置填充文本的方法。如果选项的第四个参数提供了最大宽度，文本会进行缩放以适应最大宽度。</p> + +<p>参见 {{domxref("CanvasRenderingContext2D.strokeText()")}} 方法对文本进行描边。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">void <var><em>ctx</em>.fillText(text, x, y, [maxWidth]);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>text</code></dt> + <dd>使用当前的 {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}} 和 {{domxref("CanvasRenderingContext2D.direction","direction")}} 值对文本进行渲染。</dd> +</dl> + +<dl> + <dt><code>x</code></dt> + <dd>文本起点的 x 轴坐标。</dd> + <dt><code>y</code></dt> + <dd>文本起点的 y 轴坐标。</dd> + <dt><code>maxWidth</code> {{optional_inline}}</dt> + <dd>绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_fillText_方法">使用 <code>fillText</code> 方法</h3> + +<p>这是一段使用 <code>fillText</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5] notranslate">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.font = "48px serif"; +ctx.fillText("Hello world", 50, 100); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><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.font = "48px serif"; +ctx.fillText("Hello world", 50, 100);</textarea> +</pre> + +<pre class="brush: js notranslate">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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatIE(9) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.9.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeText()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.html new file mode 100644 index 0000000000..00cf5d5b78 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.html @@ -0,0 +1,187 @@ +--- +title: CanvasRenderingContext2D.filter +slug: Web/API/CanvasRenderingContext2D/filter +translation_of: Web/API/CanvasRenderingContext2D/filter +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.filter</code></strong> 是Canvas 2D API 提供模糊、灰度等过滤效果的属性 。它类似于 CSS <a href="/en-US/docs/Web/CSS/filter"><code>filter</code></a> 属性，并且接受相同的函数。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.filter = "<filter-function1> [<filter-function2] <var>[<filter-functionN]</var>"; +ctx.filter = "none";</var> +</pre> + +<h3 id="Filter_函数">Filter 函数</h3> + +<p>filter 属性接受{{domxref("DOMString")}}字符串，可以包含一个或多个 filter 函数 。</p> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/filter#url()">url</a>(<url>)</code></dt> + <dd><code>url()</code> 函数接受一个描述SVG过滤器的XML文件的位置， 并且可以包含一个针对特殊过滤元素的锚点。</dd> + <dt><code><a href="/en-US/docs/Web/CSS/filter#blur()">blur</a>(<length>)</code></dt> + <dd>length：CSS 长度。 给绘图提供一个高斯模糊。</dd> + <dt><code><a href="/en-US/docs/Web/CSS/filter#brightness()">brightness</a>(<percentage>)</code></dt> + <dd>Percentage：百分比。 给绘图提供一个线性乘法，调节亮度的高低。</dd> + <dt><code><a href="/en-US/docs/Web/CSS/filter#contrast()">contrast</a>(<percentage>)</code></dt> + <dd>Percentage：百分比。 调节图像的对比度。 当数值为 <code>0%</code> 时，图像会完全变黑。当数值为 <code>100%</code> 时，图像没有任何变化。</dd> + <dt><code><a href="/en-US/docs/Web/CSS/filter#contrast()">drop-shadow</a>(<offset-x>, <offset-y>, <blur-radius>, <spread-radius>, <color>)</code></dt> + <dd>给绘图提供阴影。 阴影事实上是在图像下面呈现出模糊的，通过对图像的透明遮罩进行偏移绘制出一种特殊的颜色，组合而成的效果。 这个函数接受5个参数： + <ul> + <li><code><offset-x></code>: 查看 {{cssxref("<length>")}} 允许的单位。描述阴影的水平距离。</li> + <li><code><offset-y></code>: 查看 {{cssxref("<length>")}} 允许的单位。描述阴影的垂直距离。</li> + <li><code><blur-radius></code>: 数值越大，模糊就越大，从而使阴影范围变得更大颜色变得更浅。不允许为负数。</li> + <li><code><spread-radius></code>: 正数会使阴影扩张变大，负数会使阴影收缩。</li> + <li><code><color></code>: 查看 {{cssxref("<color>")}} 允许的关键字和标识符。</li> + </ul> + </dd> + <dt><code><a href="/en-US/docs/Web/CSS/filter#grayscale()">grayscale</a>(<percentage>)</code></dt> + <dd>Percentage：百分比。将图像转换成灰色的图片。 当值为100%时，图像会完全变成灰色。 当值为0%时，图像没有任何变化。</dd> + <dt><code><a href="/en-US/docs/Web/CSS/filter#hue-rotate()">hue-rotate</a>(<degree>)</code></dt> + <dd>Degree：度数。 对图像进行色彩旋转的处理。当值为0度时，图像没有任何变化。</dd> + <dt><code><a href="/en-US/docs/Web/CSS/filter#invert()">invert</a>(<percentage>)</code></dt> + <dd>Percentage：百分比。反色图像（呈现出照片底片的效果）。当值为100%时，图像会完全反色处理。当值为0%时，图像没有任何变化。</dd> + <dt><code><a href="/en-US/docs/Web/CSS/filter#opacity()">opacity</a>(<percentage>)</code></dt> + <dd>Percentage：百分比。对图像进行透明度的处理。 当值为0%时，图像完全透明。当值为100%时，图像没有任何变化。</dd> + <dt><code><a href="/en-US/docs/Web/CSS/filter#saturate()">saturate</a>(<percentage>)</code></dt> + <dd>对图像进行饱和度的处理。当值为0%时，图像完全不饱和。当值为100%时，图像没有任何变化。</dd> + <dt><code><a href="/en-US/docs/Web/CSS/filter#sepia()">sepia</a>(<percentage>)</code></dt> + <dd>对图像进行深褐色处理（怀旧风格）。 当值为100%时，图像完全变成深褐色。当值为0%时，图像没有任何变化。</dd> + <dt><code>none</code></dt> + <dd>没有使用filter。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_filter_property" name="Using_the_filter_property">使用 <code>filter</code> 属性</h3> + +<p>这是一段使用 <code>filter</code> 属性的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js;highlight[4]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.filter = "blur(5px)"; +ctx.font = "48px serif"; +ctx.strokeText("Hello world", 50, 100); +</pre> + +<p>修改下面的代码并在线查看canvas的变化 (确保你的浏览器提供这些特性，查看浏览器兼容性列表):</p> + +<div class="hidden"> +<h6 id="Playable_code" name="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.filter = "blur(5px)"; +ctx.font = "48px serif"; +ctx.strokeText("Hello world", 50, 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> + +<p>当前的规范或草案不包含此内容， 但是正考虑进行标准化。参考 <a href="http://dev.w3.org/fxtf/filters/#FilterProperty">CSS Filter Effects</a> 规范。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("35") }} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("35") }} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko-specific_注解">Gecko-specific 注解</h3> + +<ul> + <li>[1] <code>filter</code> 属性默认是无效的。你可以通过设置 <code>canvas.filters.enabled</code> 的值为true进行启用。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}</li> + <li>CSS {{cssxref("filter")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/font/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/font/index.html new file mode 100644 index 0000000000..963c27c32e --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/font/index.html @@ -0,0 +1,141 @@ +--- +title: CanvasRenderingContext2D.font +slug: Web/API/CanvasRenderingContext2D/font +tags: + - API + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/font +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.font</code></strong> 是 Canvas 2D API 描述绘制文字时，当前字体样式的属性。 使用和 <a href="/en-US/docs/Web/CSS/font" title="en/CSS/font">CSS font</a> 规范相同的字符串值。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.font = value;</var> +</pre> + +<h3 id="选项">选项</h3> + +<dl> + <dt><code>value</code></dt> + <dd>符合CSS {{cssxref("font")}} 语法的{{domxref("DOMString")}} 字符串。默认字体是 10px sans-serif。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用自定义字体" name="使用自定义字体">使用自定义字体</h3> + +<p>这个例子使用 <code>font</code> 属性设置了不同的字体大小和字体种类。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.font = "bold 48px serif"; +ctx.strokeText("Hello world", 50, 100); +</pre> + +<h4 id="结果">结果</h4> + +<div class="hidden"> +<h2 id="Playable_code">Playable_code</h2> + +<h3 id="HTML_2">HTML</h3> + +<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="编辑" /> + <input id="reset" type="button" value="重置" /> +</div> +<textarea id="code" class="playable-code"> +ctx.font = "bold 48px serif"; +ctx.strokeText("Hello world", 50, 100);</textarea> +</pre> + +<h3 id="JavaScript_2">JavaScript</h3> + +<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="sect1"></h2> + +<h3 id="使用CSS字体加载API加载字体">使用CSS字体加载API加载字体</h3> + +<p>借助{{domxref("FontFace")}} API的帮助，您可以在画布中使用字体之前显式加载字体。</p> + +<pre>let f = new FontFace('test', 'url(x)'); + +f.load().then(function() { + // Ready to use the font in a canvas context +});</pre> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求。</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.font")}}</p> + +<h3 id="Gecko-specific_注解">Gecko-specific 注解</h3> + +<ul> + <li>基于Gecko的浏览器， 例如 Firefox， 实现了一个非标准的并且不赞成使用的属性 <code>ctx.mozTextStyle</code> 。不要使用此属性。</li> + <li>在Gecko中，当将系统字体设置为canvas 2D上下文的{{domxref("CanvasRenderingContext2D.font", "font")}}（例如菜单）的值时，获取用于无法返回期望字体的字体值 （不返回任何内容）。 这已在Firefox 57（{{bug(1374885)}}）中发布的Firefox的<a href="https://wiki.mozilla.org/Quantum/Stylo">Quantum/Stylo</a>并行CSS引擎中修复。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/getimagedata/index.html new file mode 100644 index 0000000000..1f4d826121 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/getimagedata/index.html @@ -0,0 +1,96 @@ +--- +title: CanvasRenderingContext2D.getImageData() +slug: Web/API/CanvasRenderingContext2D/getImageData +translation_of: Web/API/CanvasRenderingContext2D/getImageData +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getImageData()</code></strong> 返回一个{{domxref("ImageData")}}对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为<em>(sx, sy)、</em>宽为<em>sw、</em>高为<em>sh。</em></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>sx</code></dt> + <dd>将要被提取的图像数据矩形区域的左上角 x 坐标。</dd> + <dt><code>sy</code></dt> + <dd>将要被提取的图像数据矩形区域的左上角 y 坐标。</dd> + <dt><code>sw</code></dt> + <dd>将要被提取的图像数据矩形区域的宽度。</dd> + <dt><code>sh</code></dt> + <dd>将要被提取的图像数据矩形区域的高度。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>一个{{domxref("ImageData")}} 对象，包含canvas给定的矩形图像数据。</p> + +<h3 id="错误抛出">错误抛出</h3> + +<dl> + <dt><code>IndexSizeError</code></dt> + <dd>如果高度或者宽度变量为0，则抛出错误。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_getImageData_方法">使用 <code>getImageData</code> 方法</h3> + +<p>这是一段使用 <code>getImageData</code> 方法的简单的代码片段。 获取更多信息，请看 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">canvas像素控制 </a>和 {{domxref("ImageData")}} 对象。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6] notranslate">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.rect(10, 10, 100, 100); +ctx.fill(); + +console.log(ctx.getImageData(50, 50, 100, 100)); +// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] } +</pre> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.getImageData")}}</p> + +<h3 id="兼容性注解">兼容性注解</h3> + +<ul> + <li>从 {{Gecko("5.0")}}开始， <code>getImageData()</code> 可以正确地接受超出canvas边界的矩形；canvas范围外的像素返回值是透明的，并且如果矩形小于一个像素，会返回至少一像素值的图像数据。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> + <li>{{domxref("ImageData")}}</li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation with canvas</a></li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.html new file mode 100644 index 0000000000..f96faf7401 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.html @@ -0,0 +1,124 @@ +--- +title: CanvasRenderingContext2D.getLineDash() +slug: Web/API/CanvasRenderingContext2D/getLineDash +tags: + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/getLineDash +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getLineDash()</code></strong> 是 Canvas 2D API 获取当前线段样式的方法。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.getLineDash();</var> +</pre> + +<h3 id="返回值">返回值</h3> + +<p>一个 {{jsxref("Array")}}数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组元素会被复制并重复。 例如， 设置线段为 <code>[5, 15, 25]</code> 将会得到以下返回值 <code>[5, 15, 25, 5, 15, 25]。</code></p> + +<h2 id="示例">示例</h2> + +<h3 id="使用_getLineDash_方法">使用 <code>getLineDash</code> 方法</h3> + +<p>这是一段使用 <code>getLineDash</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.setLineDash([5, 15]); +console.log(ctx.getLineDash()); // [5, 15] + +ctx.beginPath(); +ctx.moveTo(0,100); +ctx.lineTo(400, 100); +ctx.stroke(); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.setLineDash([5, 15]); +ctx.beginPath(); +ctx.moveTo(0,100); +ctx.lineTo(400, 100); +ctx.stroke();</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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getlinedash", "CanvasRenderingContext2D.getLineDash")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送请求请求。</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.getLineDash")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.html new file mode 100644 index 0000000000..c443b4dc5a --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.html @@ -0,0 +1,96 @@ +--- +title: CanvasRenderingContext2D.getTransform() +slug: Web/API/CanvasRenderingContext2D/getTransform +translation_of: Web/API/CanvasRenderingContext2D/getTransform +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getTransform()</code></strong> 方法获取当前被应用到上下文的转换矩阵</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">let <em>storedTransform<strong> = </strong>ctx</em>.getTransform(); +</pre> + +<h3 id="参数">参数</h3> + +<p>无.</p> + +<h3 id="返回值">返回值</h3> + +<p>一个 {{domxref("DOMMatrix")}} 对象</p> + +<p>转换矩阵被这样描述： <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math></p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>: 返回的对象不是实时的，所以更新它不会影响当前的转换矩阵，同时更新当前的转换矩阵不会影响已经返回的 <code>DOMMatrix</code>.</p> +</div> + +<h2 id="示例">示例</h2> + +<p>在以下例子，我们有两个 {{htmlelement("canvas")}} 元素。我们使用 {{domxref("CanvasRenderingContext2D.setTransform()")}} 设置一个转换到第一个画布，并在上面画一个矩形，然后通过 <code>getTransform()</code> 获取矩阵。</p> + +<p>然后我们将获取到的矩阵作为 <code>DOMMatrix</code> 参数传给 <code>setTransform()</code> 设置到第二个画布，并在上面画一个圆。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas width="240"></canvas> +<canvas width="240"></canvas> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">canvas { + border: 1px solid black; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">const canvases = document.querySelectorAll('canvas'); +const ctx1 = canvases[0].getContext('2d'); +const ctx2 = canvases[1].getContext('2d'); + +ctx1.setTransform(1, .2, .8, 1, 0, 0); +ctx1.fillRect(25, 25, 50, 50); + +let storedTransform = ctx1.getTransform(); +console.log(storedTransform); + +ctx2.setTransform(storedTransform); +ctx2.beginPath(); +ctx2.arc(50, 50, 50, 0, 2 * Math.PI); +ctx2.fill();</pre> + +<h4 id="结果">结果</h4> + +<p>{{ EmbedLiveSample('Examples', "100%", 180) }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-gettransform", "CanvasRenderingContext2D.getTransform")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.getTransform")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>The interface defining this method: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.transform()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.html new file mode 100644 index 0000000000..a12923f33f --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.html @@ -0,0 +1,217 @@ +--- +title: CanvasRenderingContext2D.globalAlpha +slug: Web/API/CanvasRenderingContext2D/globalAlpha +translation_of: Web/API/CanvasRenderingContext2D/globalAlpha +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.globalAlpha</code></strong> 是 Canvas 2D API 用来描述在canvas上绘图之前，设置图形和图片透明度的属性。 数值的范围从 0.0 （完全透明）到1.0 （完全不透明）。</p> + +<p>在 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a> 中参见 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> 章节。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>ctx.globalAlpha = value;</var> +</pre> + +<h3 id="选项">选项</h3> + +<dl> + <dt><code>value</code></dt> + <dd>数字在 0.0 （完全透明）和 1.0 （完全不透明）之间。 默认值是 1.0。 如果数值不在范围内，包括{{jsxref("Infinity")}} 和{{jsxref("NaN")}} ，无法赋值，并且 <code>globalAlpha</code> 会保持原有的数值。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property">使用 <code>globalAlpha</code> 属性</h3> + +<p>这是一段使用 <code>globalAlpha</code> 属性的简单代码片段，绘制了2个半透明的矩形。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[4]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.globalAlpha = 0.5; + +ctx.fillStyle = "blue"; +ctx.fillRect(10, 10, 100, 100); + +ctx.fillStyle = "red"; +ctx.fillRect(50, 50, 100, 100); +</pre> + +<p>修改下面的代码并在线查看 canvas的变化：</p> + +<div class="hidden"> +<h6 id="Playable_code" name="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" style="height:120px;"> +ctx.globalAlpha = 0.5; + +ctx.fillStyle = "blue"; +ctx.fillRect(10, 10, 100, 100); + +ctx.fillStyle = "red"; +ctx.fillRect(50, 50, 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, 380) }}</p> + +<h3 id="A_globalAlpha_example" name="A_globalAlpha_example"><code>globalAlpha</code> 例子</h3> + +<p>此例中， 绘制了4个不同背景色的正方形。 在他们上面，绘制半透明的圆形。 将那个点绘制的所有图形的 <code>globalAlpha</code> 属性值都设置为0.2。通过 for 循环绘制半径逐渐增大的圆形。 最终形成的结果是放射性渐变。通过不停地叠加圆形， 使得先前绘制的圆形的透明度越来越暗。通过增加循环数量绘制更多的圆形，图片中心的背景将会变成完全不透明。</p> + +<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); + +// draw background +ctx.fillStyle = '#FD0'; +ctx.fillRect(0,0,75,75); +ctx.fillStyle = '#6C0'; +ctx.fillRect(75,0,75,75); +ctx.fillStyle = '#09F'; +ctx.fillRect(0,75,75,75); +ctx.fillStyle = '#F30'; +ctx.fillRect(75,75,75,75); +ctx.fillStyle = '#FFF'; + +// set transparency value +ctx.globalAlpha = 0.2; + +// Draw semi transparent circles +for (i=0;i<7;i++){ + ctx.beginPath(); + ctx.arc(75,75,10+10*i,0,Math.PI*2,true); + ctx.fill(); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko-specific_注解">Gecko-specific 注解</h3> + +<ul> + <li>从 Gecko 5.0开始， 对 <code>globalAlpha</code> 指定无效的值不再抛出 <code>SYNTAX_ERR</code> 异常； 它们已经被默默地忽略了。</li> +</ul> + +<h3 id="WebKitBlink-specific_注解">WebKit/Blink-specific 注解</h3> + +<ul> + <li>在基于 WebKit- 和 Blink- 的浏览器中， 除了此属性外，还实现了一个不标准的并且不赞成使用的方法 <code>ctx.setAlpha()</code> 。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html new file mode 100644 index 0000000000..47544ad6e2 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html @@ -0,0 +1,143 @@ +--- +title: CanvasRenderingContext2D.globalCompositeOperation +slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation +tags: + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API的 <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.globalCompositeOperation</code></strong> 属性设置要在绘制新形状时应用的合成操作的类型，其中type是用于标识要使用的合成或混合模式操作的字符串。</p> + +<p>在 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a> 中查看 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing">Compositing</a> 章节。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.globalCompositeOperation = type;</var></pre> + +<h3 id="类型">类型</h3> + +<p>{{EmbedLiveSample("合成示例", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property">使用 <code>globalCompositeOperation</code> 属性</h3> + +<p>这是一段使用 <code>globalCompositeOperation</code> 属性的简单的代码片段，绘制了2个矩形在重叠时相互排斥的情况。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[4]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.globalCompositeOperation = "xor"; + +ctx.fillStyle = "blue"; +ctx.fillRect(10, 10, 100, 100); + +ctx.fillStyle = "red"; +ctx.fillRect(50, 50, 100, 100); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div class="hidden"> +<h6 id="Playable_code" name="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" style="height:120px;"> +ctx.globalCompositeOperation = "xor"; + +ctx.fillStyle = "blue"; +ctx.fillRect(10, 10, 100, 100); + +ctx.fillStyle = "red"; +ctx.fillRect(50, 50, 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, 380) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Compositing')}}</td> + <td>{{Spec2('Compositing')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求。</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}</p> + +<h3 id="WebKitBlink-specific_注解">WebKit/Blink-specific 注解</h3> + +<ul> + <li>在基于 WebKit- 和 Blink- 的浏览器中，除了此属性外，还实现了一个不标准的并且不赞成使用的方法 <code>ctx.setCompositeOperation()</code>。</li> +</ul> + +<h3 id="Gecko-specific_注解">Gecko-specific 注解</h3> + +<ul> + <li>早起的规范草案指定了 "darker"值。 然而， Firefox 在第4个版本({{bug(571532)}})移除了对 "darker"的支持。参见 <a href="http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker">这篇文章</a> 建议如何使用不同的值实现和"darker"类似的效果。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html new file mode 100644 index 0000000000..db037d2335 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html @@ -0,0 +1,142 @@ +--- +title: CanvasRenderingContext2D.imageSmoothingEnabled +slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +tags: + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.imageSmoothingEnabled</code></strong> 是 Canvas 2D API 用来设置图片是否平滑的属性，true表示图片平滑（默认值），false表示图片不平滑。当我们获取 <code>imageSmoothingEnabled</code> 属性值时， 它会返回最新设置的值。</p> + +<p> 以缩放画布为例，这个属性对像素为主的游戏很有用。默认的改变大小的算法会造成图片模糊并且破坏图片原有的像素。 如果那样的话，设置属性值为false。 参见 CSS {{cssxref("image-rendering")}} 属性。</p> + +<div class="blockIndicator note"> +<p><strong>注意:</strong>您可以使用{{domxref("CanvasRenderingContext2D.imageSmoothingQuality", "imageSmoothingQuality")}}属性来调整平滑质量。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.imageSmoothingEnabled = value;</var></pre> + +<h3 id="选项">选项</h3> + +<dl> + <dt><code>value</code></dt> + <dd>一个{{jsxref("Boolean")}} 类型的值，表示图片是否平滑。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property">使用 <code>imageSmoothingEnabled</code> 属性</h3> + +<p>本示例比较了三个图像。 第一个图像以其自然大小绘制，第二个图像缩放为3倍并启用了图像平滑，而第三个图像缩放为3倍但禁用了图像平滑。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas" width="460" height="210"></canvas></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); + +const ctx = canvas.getContext('2d'); +ctx.font = '16px sans-serif'; +ctx.textAlign = 'center'; + +const img = new Image(); +img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png'; +img.onload = function() { + const w = img.width, + h = img.height; + + ctx.fillText('Source', w * .5, 20); + ctx.drawImage(img, 0, 24, w, h); + + ctx.fillText('Smoothing = TRUE', w * 2.5, 20); +<code> ctx.imageSmoothingEnabled = true;</code> + ctx.drawImage(img, w, 24, w * 3, h * 3); + + ctx.fillText('Smoothing = FALSE', w * 5.5, 20); +<code> ctx.imageSmoothingEnabled = false;</code> + ctx.drawImage(img, w * 4, 24, w * 3, h * 3); +}; +</pre> + +<div class="hidden"> +<h2 id="Disabling_image_smoothing">Disabling_image_smoothing</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><canvas id="canvas" width="460" height="210"></canvas></pre> + + + +<h3 id="JavaScript_2">JavaScript</h3> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); + +const ctx = canvas.getContext('2d'); +ctx.font = '16px sans-serif'; +ctx.textAlign = 'center'; + +const img = new Image(); +img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png'; +img.onload = function() { + const w = img.width, + h = img.height; + + ctx.fillText('Source', w * .5, 20); + ctx.drawImage(img, 0, 24, w, h); + + ctx.fillText('Smoothing = TRUE', w * 2.5, 20); +<code> ctx.imageSmoothingEnabled = true;</code> + ctx.drawImage(img, w, 24, w * 3, h * 3); + + ctx.fillText('Smoothing = FALSE', w * 5.5, 20); +<code> ctx.imageSmoothingEnabled = false;</code> + ctx.drawImage(img, w * 4, 24, w * 3, h * 3); +}; +</pre> + + +</div> + +<h4 id="结果">结果</h4> + +<p>{{ EmbedLiveSample('Disabling_image_smoothing', 700, 240) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送拉取请求。</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{cssxref("image-rendering")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.html new file mode 100644 index 0000000000..fe8fee4b4b --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.html @@ -0,0 +1,182 @@ +--- +title: CanvasRenderingContext2D.imageSmoothingQuality +slug: Web/API/CanvasRenderingContext2D/imageSmoothingQuality +tags: + - API + - Canvas + - CanvasRenderingContext2D + - imageSmoothingQuality + - 图像平滑度 +translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingQuality +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p><strong>CanvasRenderingContext2D.imageSmoothingQuality</strong> 是 Canvas 2D API， 用于设置图像平滑度的属性。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.</var>imageSmoothingQuality<var> = value +value</var> = ctx.imageSmoothingQuality</pre> + +<h3 id="选项">选项</h3> + +<dl> + <dt><code>value</code></dt> + <dd>"low","medium","high"</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_imageSmoothingQuality_属性">使用 imageSmoothingQuality 属性</h3> + +<p>这是一段简单的代码片段，对缩放的图片使用 <code>imageSmoothingQuality </code>属性。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[7-10]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +var img = new Image(); +img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; +img.onload = function() { + ctx.mozImageSmoothingEnabled = false; + ctx.imageSmoothingQuality = "Medium"; + ctx.webkitImageSmoothingEnabled = false; + ctx.msImageSmoothingEnabled = false; + ctx.imageSmoothingEnabled = false; + ctx.drawImage(img, 0, 0, 400, 200); +};</pre> + +<p>编辑下面代码，在线查看 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" style="height:140px;"> +var img = new Image(); +img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; +img.onload = function() { + ctx.mozImageSmoothingEnabled = false; + ctx.webkitImageSmoothingEnabled = false; + ctx.imageSmoothingQuality = "Medium"; + ctx.msImageSmoothingEnabled = false; + ctx.imageSmoothingEnabled = false; + ctx.drawImage(img, 0, 0, 400, 200); +};</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, 400) }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#imagesmoothingquality", "imageSmoothingQuality")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(54.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(41)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(54.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(41)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(54.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{cssxref("image-rendering")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..3a428f8f85 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,451 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D +--- +<p>{{APIRef}}</p> + +<p><code><strong>CanvasRenderingContext2D</strong></code>接口是Canvas API的一部分，可为{{HTMLElement("canvas")}}元素的绘图表面提供2D渲染上下文。 它用于绘制形状，文本，图像和其他对象。</p> + +<p>请参阅侧边栏和下方的界面属性和方法。 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">Canvas教程</a><span style="line-height: inherit;">提供了更多的信息，例子和资源</span>。</p> + +<h2 id="基础示例">基础示例</h2> + +<p>要获得<code>CanvasRenderingContext2D</code> 实例，您必须首先具有HTML <code><canvas></code>元素才能使用：</p> + +<pre class="brush: html notranslate"><canvas id="my-house" width="300" height="300"></canvas> +</pre> + +<p>要获取画布的2D渲染上下文，请在<code><canvas></code>元素上调用{{domxref("HTMLCanvasElement.getContext()", "getContext()")}}，并提供<code>'2d'</code>作为参数：</p> + +<pre class="brush: js notranslate">const canvas = document.getElementById('my-house'); +const ctx = canvas.getContext('2d'); +</pre> + +<p>有了上下文，您就可以绘制任何喜欢的东西。 此代码绘制了一个房子：</p> + +<pre class="brush: js notranslate">// Set line width +ctx.lineWidth = 10; + +// Wall +ctx.strokeRect(75, 140, 150, 110); + +// Door +ctx.fillRect(130, 190, 40, 60); + +// Roof +ctx.beginPath(); +ctx.moveTo(50, 140); +ctx.lineTo(150, 60); +ctx.lineTo(250, 140); +ctx.closePath(); +ctx.stroke(); +</pre> + +<p>生成的图形如下所示:</p> + +<div class="hidden"> +<h2 id="Basic_example">Basic_example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><canvas id="my-house" width="300" height="300"></canvas> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">const canvas = document.getElementById('my-house'); +const ctx = canvas.getContext('2d'); +// Set line width +ctx.lineWidth = 10; + +// Wall +ctx.strokeRect(75, 140, 150, 110); + +// Door +ctx.fillRect(130, 190, 40, 60); + +// Roof +ctx.beginPath(); +ctx.moveTo(50, 140); +ctx.lineTo(150, 60); +ctx.lineTo(250, 140); +ctx.closePath(); +ctx.stroke();</pre> + +<h3 id="结果">结果</h3> +</div> + +<p>{{EmbedLiveSample('Basic_example', 700, 330)}}</p> + +<h2 id="绘制矩形" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">绘制矩形</h2> + +<p>以下是3个绘制矩形位图的方法。</p> + +<p><strong>{{domxref("CanvasRenderingContext2D.clearRect()")}}</strong></p> + +<dl> + <dd>设置指定矩形区域内（以 点 <em>(x, y)</em> 为起点，范围是<em>(width, height)</em> ）所有像素变成透明，并擦除之前绘制的所有内容。</dd> + <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt> + <dd>绘制填充矩形，矩形的起点在 <em>(x, y) </em>位置，矩形的尺寸是 <em>width</em> 和 <em>height </em>。</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt> + <dd>在 canvas 中，使用当前的笔触样式，描绘一个起点在 <em>(x, y)</em> 、宽度为<em> w</em> 、高度为 <em>h</em> 的矩形。</dd> +</dl> + +<h2 id="绘制文本" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">绘制文本</h2> + +<p>下面是绘制文本的方法。 参见 {{domxref("TextMetrics")}} 对象获取文本属性。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt> + <dd>在(x,y)位置绘制（填充）文本。</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt> + <dd>在(x,y)位置绘制（描边）文本。</dd> + <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt> + <dd>返回 {{domxref("TextMetrics")}} 对象。</dd> +</dl> + +<h2 id="线型" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">线型</h2> + +<p>下面的方法和属性控制如何绘制线。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt> + <dd>线的宽度。默认 <code>1.0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt> + <dd>线末端的类型。 允许的值： <code>butt</code> (默认), <code>round</code>, <code>square</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt> + <dd>定义两线相交拐点的类型。允许的值：<code style="font-style: normal;">round</code>, <code style="font-style: normal;">bevel</code>, <code style="font-style: normal;">miter</code>(默认)。</dd> + <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt> + <dd>斜接面限制比例。默认 <code>10。</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt> + <dd>返回当前线段样式的数组，数组包含一组数量为偶数的非负数数字。</dd> + <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt> + <dd>设置当前的线段样式。</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt> + <dd>描述在哪里开始绘制线段。</dd> +</dl> + +<h2 id="文本样式" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">文本样式</h2> + +<p>下面的属性控制如何设计文本。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt> + <dd>字体设置。 默认值 <code>10px sans-serif。</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt> + <dd>文本对齐设置。 允许的值： <code>start</code> (默认), <code>end</code>, <code>left</code>, <code>right</code> 或 <code>center</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt> + <dd>基线对齐设置。 允许的值： <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (默认),<code>ideographic</code>, <code>bottom</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt> + <dd>文本的方向。 允许的值： <code>ltr, rtl</code>, <code>inherit</code> (默认).</dd> +</dl> + +<h2 id="填充和描边样式" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">填充和描边样式</h2> + +<p>填充设计用于图形内部的颜色和样式，描边设计用于图形的边线。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt> + <dd>图形内部的颜色和样式。 默认 <code>#000</code> (黑色).</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt> + <dd>图形边线的颜色和样式。 默认 <code>#000</code> (黑色).</dd> +</dl> + +<h2 id="渐变和图案" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">渐变和图案</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt> + <dd>创建一个沿着参数坐标指定的线的线性渐变。</dd> + <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt> + <dd>创建一个沿着参数坐标指定的线的放射性性渐变。</dd> + <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt> + <dd>使用指定的图片 (a {{domxref("CanvasImageSource")}})创建图案。通过 repetition 变量指定的方向上重复源图片。此方法返回 {{domxref("CanvasPattern")}}对象。</dd> +</dl> + +<h2 id="阴影" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">阴影</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt> + <dd>描述模糊效果。 默认 <code>0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt> + <dd>阴影的颜色。 默认fully-transparent black.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt> + <dd>阴影水平方向的偏移量。 默认 0.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt> + <dd>阴影垂直方向的偏移量。 默认 0.</dd> +</dl> + +<h2 id="路径" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">路径</h2> + +<p>下面的方法用来操作对象的路径。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt> + <dd>清空子路径列表开始一个新的路径。当你想创建一个新的路径时，调用此方法。</dd> + <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt> + <dd>使笔点返回到当前子路径的起始点。它尝试从当前点到起始点绘制一条直线。如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。</dd> + <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt> + <dd>将一个新的子路径的起始点移动到(x，y)坐标。</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt> + <dd>使用直线连接子路径的最后的点到x,y坐标。</dd> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt> + <dd>添加一个3次贝赛尔曲线路径。该方法需要三个点。 第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 <code style="font-style: normal;">moveTo()</code> 进行修改。</dd> + <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt> + <dd>添加一个2次贝赛尔曲线路径。</dd> + <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt> + <dd>绘制一段圆弧路径， 圆弧路径的圆心在 <em>(x, y)</em> 位置，半径为<em> r</em> ，根据<em>anticlockwise</em> （默认为顺时针）指定的方向从 <em>startAngle</em> 开始绘制，到 <em>endAngle</em> 结束。</dd> + <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt> + <dd>根据控制点和半径绘制圆弧路径，使用当前的描点(前一个moveTo或lineTo等函数的止点)。根据当前描点与给定的控制点1连接的直线，和控制点1与控制点2连接的直线，作为使用指定半径的圆的<strong>切线</strong>，画出两条切线之间的弧线路径。</dd> + <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt> + <dd>添加一个椭圆路径，椭圆的圆心在（x,y）位置，半径分别是<em>radiusX</em> 和 <em>radiusY</em> ，按照<em>anticlockwise</em> （默认顺时针）指定的方向，从 <em>startAngle </em> 开始绘制，到 <em>endAngle</em> 结束。</dd> + <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt> + <dd>创建一个矩形路径，矩形的起点位置是 <em>(x, y) </em>，尺寸为 <em>width</em> 和 <em>height</em>。</dd> +</dl> + +<h2 id="绘制路径" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">绘制路径</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt> + <dd>使用当前的样式填充子路径。</dd> + <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt> + <dd>使用当前的样式描边子路径。</dd> + <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt> + <dd>如果给定的元素获取了焦点，那么此方法会在当前的路径绘制一个焦点。</dd> + <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt> + <dd>将当前或给定的路径滚动到窗口。</dd> + <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt> + <dd>从当前路径创建一个剪切路径。在 <strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">clip() </strong>调用之后，绘制的所有信息只会出现在剪切路径内部。例如： 参见 Canvas教程中的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">剪切路径</a> 。</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt> + <dd>判断当前路径是否包含检测点。</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt> + <dd>判断检测点是否在路径的描边线上。</dd> +</dl> + +<h2 id="变换" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">变换</h2> + +<p>在 <strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">CanvasRenderingContext2D </strong>渲染背景中的对象会有一个当前的变换矩阵，一些方法可以对其进行控制。当创建当前的默认路径，绘制文本、图形和{{domxref("Path2D")}}对象的时候，会应用此变换矩阵。下面列出的方法保持历史和兼容性的原因，是为了{{domxref("SVGMatrix")}}对象现在能够应用于大部分 API ，将来会被替换。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt> + <dd>当前的变换矩阵 ({{domxref("SVGMatrix")}} 对象)。</dd> + <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt> + <dd>在变换矩阵中增加旋转，角度变量表示一个顺时针旋转角度并且用弧度表示。</dd> + <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt> + <dd>根据 x 水平方向和 y 垂直方向，为canvas 单位添加缩放变换。</dd> + <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt> + <dd>通过在网格中移动 canvas 和 canvas 原点 x 水平方向、原点 y 垂直方向，添加平移变换</dd> + <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt> + <dd>使用方法参数描述的矩阵多次叠加当前的变换矩阵。</dd> + <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt> + <dd>重新设置当前的变换为单位矩阵，并使用同样的变量调用 <strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">transform() </strong>方法。</dd> + <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt> + <dd>使用单位矩阵重新设置当前的变换。</dd> +</dl> + +<h2 id="合成" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">合成</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt> + <dd>在合成到 canvas 之前，设置图形和图像透明度的值。默认 <code style="font-style: normal;">1.0</code> (不透明)。</dd> + <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt> + <dd>通过 <code>globalAlpha</code> 应用，设置如何在已经存在的位图上绘制图形和图像。</dd> +</dl> + +<h2 id="绘制图像" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">绘制图像</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt> + <dd>绘制指定的图片。该方法有多种格式，提供了很大的使用灵活性。</dd> +</dl> + +<h2 id="像素控制" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">像素控制</h2> + +<p>参见 {{domxref("ImageData")}} 对象。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt> + <dd>使用指定的尺寸，创建一个新的、空白的 {{domxref("ImageData")}} 对象。所有的像素在新对象中都是透明的。</dd> + <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt> + <dd>返回一个 {{domxref("ImageData")}} 对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为<em>(sx, sy)、</em>宽为<em>sw、</em>高为<em>sh</em>。</dd> + <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt> + <dd>将数据从已有的 {{domxref("ImageData")}} 绘制到位图上。 如果提供了脏矩形，只能绘制矩形的像素。 </dd> +</dl> + +<h2 id="图像平滑" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">图像平滑</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt> + <dd>图像平滑的方式；如果禁用，缩放时，图像不会被平滑处理。</dd> +</dl> + +<h2 id="canvas_状态" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">canvas 状态</h2> + +<p><strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">C</strong><strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">anvasRenderingContext2D</strong>渲染环境包含了多种绘图的样式状态（属性有线的样式、填充样式、阴影样式、文本样式）。下面的方法会帮助你使用这些状态：</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt> + <dd>使用栈保存当前的绘画样式状态，你可以使用 <strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">restore()</strong> 恢复任何改变。</dd> + <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt> + <dd>恢复到最近的绘制样式状态，此状态是通过 <strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">save()</strong> 保存到”状态栈“中最新的元素。</dd> + <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt> + <dd>对 {{domxref("HTMLCanvasElement")}} 只读的反向引用。如果和 {{HTMLElement("canvas")}} 元素没有联系，可能为{{jsxref("null")}}。</dd> +</dl> + +<h2 id="点击区域" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">点击区域</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> + <dd>给 canvas 添加点击区域。</dd> + <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> + <dd>从 canvas 中删除指定 <code style="font-style: normal;">id</code> 的点击区域。</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> + <dd>从 canvas 中删除所有的点击区域。</dd> +</dl> + +<h2 id="不标准的_APIs" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">不标准的 APIs</h2> + +<h3 id="临时的和_WebKit_内核" style="font-size: 1.71428571428571rem;">临时的和 WebKit 内核</h3> + +<p>很多 APIs <a href="https://code.google.com/p/chromium/issues/detail?id=363198">不赞成使用并且将来会被删除</a>。</p> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt> + <dd>删除所有的阴影设置，例如 {{domxref("CanvasRenderingContext2D.shadowColor")}} 和{{domxref("CanvasRenderingContext2D.shadowBlur")}}。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt> + <dd>这是一个和 <code>drawImage </code>相等的多余的方法。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt> + <dd>使用{{domxref("CanvasRenderingContext2D.globalAlpha")}} 替代。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt> + <dd>使用{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} 替代。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt> + <dd>使用{{domxref("CanvasRenderingContext2D.lineWidth")}} 替代。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt> + <dd>使用{{domxref("CanvasRenderingContext2D.lineJoin")}} 替代。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt> + <dd>使用{{domxref("CanvasRenderingContext2D.lineCap")}}替代。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt> + <dd>使用{{domxref("CanvasRenderingContext2D.miterLimit")}} 替代。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt> + <dd>使用{{domxref("CanvasRenderingContext2D.strokeStyle")}} 替代。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt> + <dd>使用{{domxref("CanvasRenderingContext2D.fillStyle")}}替代。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt> + <dd>私用{{domxref("CanvasRenderingContext2D.shadowColor")}} 和{{domxref("CanvasRenderingContext2D.shadowBlur")}} 替代。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt> + <dd>使用{{domxref("CanvasRenderingContext2D.getLineDash()")}} 和{{domxref("CanvasRenderingContext2D.setLineDash()")}}替代。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt> + <dd>使用{{domxref("CanvasRenderingContext2D.lineDashOffset")}}替代。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt> + <dd>使用{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} 替代。</dd> +</dl> + +<h3 id="仅是临时的" style="font-size: 1.71428571428571rem;">仅是临时的</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.getContextAttributes()</code></dt> + <dd>受 <code style="font-style: normal;">WebGLRenderingContext</code> 方法的启发，该方法会返回一个 <code style="font-style: normal;">Canvas2DContextAttributes</code> 对象。在 canvas 中，这个对象包含属性”storage“，表示存储器的应用（默认”persistent“）；属性”alpha“，表示透明度的应用（默认 true）。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt> + <dd>受 <code style="font-style: normal;">WebGLRenderingContext</code> 方法的启发，如果 Canvas 上下文丢失了，会返回 <code style="font-style: normal;">true</code> ，否则返回 <code style="font-style: normal;">false</code> 。</dd> +</dl> + +<h3 id="WebKit_特有的" style="font-size: 1.71428571428571rem;">WebKit 特有的</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt> + <dd>关于 canvas 元素可支持存储的大小。参见 <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt> + <dd>原本打算支持存储 HD ，但是从 canvas 规范中删除了。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt> + <dd>原本打算支持存储 HD ，但是从 canvas 规范中删除了。</dd> +</dl> + +<dl> +</dl> + +<h3 id="Gecko_特有的" style="font-size: 1.71428571428571rem;">Gecko 特有的</h3> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt> + <dd><span id="summary_alias_container">CSS 和 SVG 滤镜 作为 Canvas APIs。</span> 可能在新版本的规范中会标准化。</dd> +</dl> + +<h4 id="有前缀的_APIs" style="font-size: 1.28571428571429rem;">有前缀的 APIs</h4> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt> + <dd>设置或获取当前的变换矩阵， 参见{{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt> + <dd>设置或获取当前翻转的变换矩阵。 {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozFillRule</code></dt> + <dd>应用的 <a class="external external-icon" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">填充规则</a> 。 必须是 <code>evenodd</code> 或者 <code>nonzero</code> (默认)。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt> + <dd>参见 {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDash</code></dt> + <dd>描述相互交替的线段和间距长度的数组 {{ gecko_minversion_inline("7.0") }}。 使用 {{domxref("CanvasRenderingContext2D.getLineDash()")}} 和 {{domxref("CanvasRenderingContext2D.setLineDash()")}} 替代。</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDashOffset</code></dt> + <dd>描述线段数组在线上从哪里开始。 {{ gecko_minversion_inline("7.0") }}。 使用 {{domxref("CanvasRenderingContext2D.lineDashOffset")}} 替代。</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt> + <dd>在 Gecko 1.9 中引入， 不赞成使用的 {{domxref("CanvasRenderingContext2D.font")}} 属性。</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt> + <dd>这个方法在 Gecko 1.9 中引入，从 Gecko 7.0. 开始删除。 使用 {{domxref("CanvasRenderingContext2D.strokeText()")}} 或者 {{domxref("CanvasRenderingContext2D.fillText()")}} 替代。</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt> + <dd>这个方法在 Gecko 1.9 中引入， 从 Gecko 7.0. 开始未实现。 使用 {{domxref("CanvasRenderingContext2D.measureText()")}} 替代。</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt> + <dd>这个方法在 Gecko 1.9 中引入，从 Gecko 7.0. 开始删除。</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}}<code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt> + <dd>这个方法在 Gecko 1.9 中引入，从 Gecko 7.0. 开始删除。</dd> +</dl> + +<h4 id="内部的_APIs_chrome-context_特有的" style="font-size: 1.28571428571429rem;">内部的 APIs (chrome-context 特有的)</h4> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}</dt> + <dd>在 <strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">canvas</strong> 内渲染一个 XUL 元素的区域。</dd> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt> + <dd>在 <strong style="font-family: courier new,andale mono,monospace;">canvas</strong> 内渲染一个窗口的区域。窗口可视区的内容被渲染，忽略窗口的剪切和滚动。</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt> + <dd>这个方法会引起当前的上下文使用后端的硬件加速作为软件的备选方案。所有的状态都会被保留。</dd> +</dl> + +<h3 id="IE_浏览器" style="font-size: 1.71428571428571rem;">IE 浏览器</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt> + <dd>应用的<a class="external external-icon" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">填充规则</a> 。必须是 <code>evenodd</code> 或者 <code>nonzero</code> (默认)。</dd> +</dl> + +<h2 id="规范" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#2dcontext", "CanvasRenderingContext2D")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求。</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D")}}</p> + +<h2 id="参见" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">参见</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{HTMLElement("canvas")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.html new file mode 100644 index 0000000000..bd95a9038a --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.html @@ -0,0 +1,206 @@ +--- +title: CanvasRenderingContext2D.isPointInPath() +slug: Web/API/CanvasRenderingContext2D/isPointInPath +translation_of: Web/API/CanvasRenderingContext2D/isPointInPath +--- +<div>{{APIRef}}</div> + +<p><code style="font-style: normal;"><strong>CanvasRenderingContext2D</strong></code><strong><code>.isPointInPath()</code></strong>是 Canvas 2D API 用于判断在当前路径中是否包含检测点的方法<font face="Courier New, Andale Mono, monospace"><strong>。</strong></font></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">boolean <var><em>ctx</em>.isPointInPath(x, y); +boolean <var><em>ctx</em>.isPointInPath(x, y, fillRule); + +boolean <var><em>ctx</em>.isPointInPath(path, x, y); +boolean <var><em>ctx</em>.isPointInPath(path, x, y, fillRule);</var></var></var></var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>x</dt> + <dd>检测点的X坐标</dd> + <dt>y</dt> + <dd>检测点的Y坐标</dd> + <dt><code>fillRule</code></dt> + <dd>用来决定点在路径内还是在路径外的算法。<br> + 允许的值： + <ul> + <li><code><strong>"nonzero</strong></code>": <a href="http://en.wikipedia.org/wiki/Nonzero-rule">非零环绕规则 </a>，默认的规则。</li> + <li><code><strong>"evenodd"</strong></code>: <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">奇偶环绕原则 </a>。</li> + </ul> + </dd> + <dt><code>path</code></dt> + <dd>{{domxref("Path2D")}}应用的路径。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt>{{jsxref("Boolean")}}</dt> + <dd>一个Boolean值，当检测点包含在当前或指定的路径内，返回 true；否则返回 false。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_isPointInPath_方法">使用 <code>isPointInPath</code> 方法</h3> + +<p>这是一段简单的代码片段，使用 <code>isPointinPath</code> 方法检查某点是否在当前的路径内。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.rect(10, 10, 100, 100); +ctx.stroke(); +console.log(ctx.isPointInPath(10, 10)); // true +</pre> + +<p>修改下面的代码， 在线查看 canvas的变化并在你的 <a href="/en-US/docs/Tools/Browser_Console">控制台</a> 中观察日志信息：</p> + +<div style="display: none;"> +<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.rect(10, 10, 100, 100); +ctx.stroke(); +console.log(ctx.isPointInPath(10, 10)); // true</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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ispointinpath", "CanvasRenderingContext2D.isPointInPath")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Path parameter</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop(31) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Path parameter</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile(31) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Compatibility_注解">Compatibility 注解</h3> + +<ul> + <li>在 Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)之前，这个方法是错误的，在和路径进行比较前，该方法不会根据当前的变形矩阵增加指定点的坐标。现在，该方法可以正确执行，甚至上下文进行旋转、缩放或其他方式的变形。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.html new file mode 100644 index 0000000000..8732970d18 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.html @@ -0,0 +1,193 @@ +--- +title: CanvasRenderingContext2D.isPointInStroke() +slug: Web/API/CanvasRenderingContext2D/isPointInStroke +tags: + - isPointInStroke + - 方法 + - 检测 +translation_of: Web/API/CanvasRenderingContext2D/isPointInStroke +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.isPointInStroke()</code></strong>是 Canvas 2D API 用于检测某点是否在路径的描边线上的方法。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">boolean <var><em>ctx</em>.isPointInStroke(x, y); +<var>boolean <var><em>ctx</em>.isPointInStroke(path, x, y);</var></var></var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>x</dt> + <dd>检测点的X坐标。</dd> + <dt>y</dt> + <dd>检测点的Y坐标。</dd> + <dt><code>path</code></dt> + <dd>{{domxref("Path2D")}} 路径。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt>{{jsxref("Boolean")}}</dt> + <dd>一个布尔值，当这个点在路径的描边线上，则返回true，否则返回false。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用isPointInStroke方法">使用<code>isPointInStroke方法</code></h3> + +<p>这只是一个使用 <strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">isPointInStroke</strong> 方法的简单的代码片段，用于检测一个点是否在路径的描边线上<code style="font-style: normal;">。</code></p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.rect(10, 10, 100, 100); +ctx.stroke(); +console.log(ctx.isPointInStroke(10, 10)); // true +</pre> + +<p>修改线面的代码，在线查看 canvas 的变化，并在你的<a href="/en-US/docs/Tools/Browser_Console">控制台</a>查看日至信息：</p> + +<div style="display: none;"> +<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.rect(10, 10, 100, 100); +ctx.stroke(); +console.log(ctx.isPointInStroke(10, 10)); // true</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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ispointinstroke", "CanvasRenderingContext2D.isPointInStroke")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Path parameter</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop(31) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Path parameter</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile(31) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.html new file mode 100644 index 0000000000..e3772f362a --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.html @@ -0,0 +1,217 @@ +--- +title: CanvasRenderingContext2D.lineCap +slug: Web/API/CanvasRenderingContext2D/lineCap +translation_of: Web/API/CanvasRenderingContext2D/lineCap +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineCap</code></strong> 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有3个可能的值，分别是：<code>butt</code>, <code>round</code> and <code>square</code>。默认值是 <code>butt。</code></p> + +<p>参见 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a> 中的 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> 章节。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.lineCap = "butt"; +<var><em>ctx</em>.lineCap = "round"; +<var><em>ctx</em>.lineCap = "square";</var></var></var></pre> + +<h3 id="选项">选项</h3> + +<dl> + <dt><code>butt</code></dt> + <dd>线段末端以方形结束。</dd> + <dt><code>round</code></dt> + <dd>线段末端以圆形结束。</dd> + <dt><code>square</code></dt> + <dd>线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">使用 <code>lineCap</code> 属性</h3> + +<p>这是一段简单的代码片段，使用 <code>lineCap</code> 属性绘制以圆形结尾的线段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[7]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.beginPath(); +ctx.moveTo(0,0); +ctx.lineWidth = 15; +ctx.lineCap = "round"; +ctx.lineTo(100, 100); +ctx.stroke(); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div class="hidden"> +<h6 id="Playable_code" name="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.beginPath(); +ctx.moveTo(0,0); +ctx.lineWidth = 15; +ctx.lineCap = "round"; +ctx.lineTo(100, 100); +ctx.stroke();</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> + +<h3 id="A_lineCap_example" name="A_lineCap_example"><code>lineCap</code> 例子</h3> + +<p>在这个例子中绘制了3条线段， 每条线段都设置了不同的 <code style="font-style: normal;">lineCap</code> 属性值。通过2条导航线能够精确地看到3条已绘制线段之间的不同。 每条线段的顶端和末端都能在导航线上准确的反映出来。</p> + +<p>左侧的线段使用了默认值 <code>butt</code> ， 和导航线是完全平齐的。 第二条线段使用了 <code>round</code> 选项，在线段末端增加了一个半径为线短宽度一半的半圆。右侧的线段使用了 <code>square</code> 选项，增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。</p> + +<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); +var lineCap = ['butt','round','square']; + +// Draw guides +ctx.strokeStyle = '#09f'; +ctx.beginPath(); +ctx.moveTo(10,10); +ctx.lineTo(140,10); +ctx.moveTo(10,140); +ctx.lineTo(140,140); +ctx.stroke(); + +// Draw lines +ctx.strokeStyle = 'black'; +for (var i = 0; i < lineCap.length; i++) { + ctx.lineWidth = 15; + ctx.lineCap = lineCap[i]; + ctx.beginPath(); + ctx.moveTo(25+i*50,10); + ctx.lineTo(25+i*50,140); + ctx.stroke(); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="WebKitBlink-specific_注解">WebKit/Blink-specific 注解</h3> + +<ul> + <li>在基于WebKit- 和 Blink- 的浏览器中，除了此属性外，还实现了一个不标准的并且不赞成使用的方法 <code>ctx.setLineCap()</code> 。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.html new file mode 100644 index 0000000000..44b8c1ad65 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.html @@ -0,0 +1,162 @@ +--- +title: CanvasRenderingContext2D.lineDashOffset +slug: Web/API/CanvasRenderingContext2D/lineDashOffset +tags: + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/lineDashOffset +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineDashOffset</code></strong> 是 Canvas 2D API 设置虚线偏移量的属性，例如可以实现 “<a href="http://en.wikipedia.org/wiki/Marching_ants">蚂蚁线</a>“ 的效果。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.lineDashOffset = value;</var> +</pre> + +<dl> + <dt><code>value</code></dt> + <dd>偏移量是float精度的数字。 初始值为 <code>0.0。</code></dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_lineDashOffset_属性">使用 <code>lineDashOffset</code> 属性</h3> + +<p>这是一段简单的代码片段，使用 <code>lineDashOffset</code> 属性绘制虚线。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.setLineDash([4, 16]); +ctx.lineDashOffset = 2; + +ctx.beginPath(); +ctx.moveTo(0,100); +ctx.lineTo(400, 100); +ctx.stroke(); +</pre> + +<p>修改下面的代码并在线查看 canvas 变化：</p> + +<div style="display: none;"> +<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" style="height: 120px"> +ctx.setLineDash([4, 16]); +ctx.lineDashOffset = 2; + +ctx.beginPath(); +ctx.moveTo(0,100); +ctx.lineTo(400, 100); +ctx.stroke();</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, 380) }}</p> + +<h3 id="Marching_ants" name="Marching_ants">“蚂蚁线”</h3> + +<p>”蚂蚁线“效果是一种动画技巧，经常出现在计算机绘图程序的套索工具中。 它能帮助用户根据图片背景动态变化的边界来区分选择的边界。</p> + +<div class="hidden"> +<h6 id="HTML_2">HTML</h6> + +<pre class="brush: html"><canvas id="canvas" class="playable-canvas"></canvas></pre> +</div> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var offset = 0; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ctx.setLineDash([4, 2]); + ctx.lineDashOffset = -offset; + ctx.strokeRect(10,10, 100, 100); +} + +function march() { + offset++; + if (offset > 16) { + offset = 0; + } + draw(); + setTimeout(march, 20); +} + +march();</pre> + +<p>{{ EmbedLiveSample('Marching_ants', 700, 200) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linedashoffset", "CanvasRenderingContext2D.lineDashOffset")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送请求请求。</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.lineDashOffset")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a></li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/linejoin/index.html new file mode 100644 index 0000000000..df108cd01a --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linejoin/index.html @@ -0,0 +1,213 @@ +--- +title: CanvasRenderingContext2D.lineJoin +slug: Web/API/CanvasRenderingContext2D/lineJoin +translation_of: Web/API/CanvasRenderingContext2D/lineJoin +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineJoin</code></strong> 是 Canvas 2D API 用来设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。</p> + +<p>参见 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a> 中的 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> 章节。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.lineJoin = "bevel"; +<var><em>ctx</em>.lineJoin = "round"; +<var><em>ctx</em>.lineJoin = "miter";</var></var></var></pre> + +<h3 id="选项">选项</h3> + +<p>此属性有3个值： <code>round</code>, <code>bevel</code> and <code>miter</code>。默认值是 <code>miter。注意：如果2个相连部分在同一方向，那么lineJoin不会产生任何效果</code>，因为在那种情况下不会出现连接区域。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p> + +<dl> + <dt><code>round</code></dt> + <dd>通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。</dd> + <dt><code>bevel</code></dt> + <dd>在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。</dd> + <dt><code>miter</code></dt> + <dd>通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}} 属性看到效果。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">使用 <code>lineJoin</code> 属性</h3> + +<p>这是一段使用 <code>lineJoin</code> 属性的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[5]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.lineWidth = 10; +ctx.lineJoin = "round"; +ctx.beginPath(); +ctx.moveTo(0,0); +ctx.lineTo(200, 100); +ctx.lineTo(300,0); +ctx.stroke(); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div class="hidden"> +<h6 id="Playable_code" name="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" style="height:120px;"> +ctx.lineWidth = 10; +ctx.lineJoin = "round"; +ctx.beginPath(); +ctx.moveTo(0,0); +ctx.lineTo(200, 100); +ctx.lineTo(300,0); +ctx.stroke();</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, 380) }}</p> + +<h3 id="A_lineJoin_example" name="A_lineJoin_example"><code>lineJoin</code> 例子</h3> + +<p>下面的例子绘制了3条不同的路径，演示 <code>lineJoin</code> 属性3种不同的设置。</p> + +<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); +var lineJoin = ['round','bevel','miter']; +ctx.lineWidth = 10; + +for (var i = 0; i < lineJoin.length; i++) { + ctx.lineJoin = lineJoin[i]; + ctx.beginPath(); + ctx.moveTo(-5,5+i*40); + ctx.lineTo(35,45+i*40); + ctx.lineTo(75,5+i*40); + ctx.lineTo(115,45+i*40); + ctx.lineTo(155,5+i*40); + ctx.stroke(); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="WebKitBlink-specific_注解">WebKit/Blink-specific 注解</h3> + +<ul> + <li>基于WebKit- 和 Blink- 的浏览器中， 实现了一个不标准的并且不赞成使用的方法 <code>ctx.setLineJoin()</code> 。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/lineto/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/lineto/index.html new file mode 100644 index 0000000000..f171b170fd --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/lineto/index.html @@ -0,0 +1,166 @@ +--- +title: CanvasRenderingContext2D.lineTo() +slug: Web/API/CanvasRenderingContext2D/lineTo +translation_of: Web/API/CanvasRenderingContext2D/lineTo +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineTo()</code></strong> 是 Canvas 2D API 使用直线连接子路径的终点到x，y坐标的方法（并不会真正地绘制）。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.lineTo(x, y);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>直线终点的 x 轴坐标。</dd> + <dt><code>y</code></dt> + <dd>直线终点的 y 轴坐标。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_lineTo_方法">使用 <code>lineTo</code> 方法</h3> + +<p>这是一段使用 <code>lineTo</code> 方法的简单的代码片段。 使用 {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} 绘制路径的起始点， 使用 {{domxref("CanvasRenderingContext.moveTo", "moveTo()")}}移动画笔， 使用 {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} 方法真正地画线。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.beginPath(); +ctx.moveTo(0,0); +ctx.lineTo(100, 100); +ctx.stroke(); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.beginPath(); +ctx.moveTo(0,0); +ctx.lineTo(100, 100); +ctx.stroke();</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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.moveTo()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.html new file mode 100644 index 0000000000..12216cccb7 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.html @@ -0,0 +1,101 @@ +--- +title: CanvasRenderingContext2D.lineWidth +slug: Web/API/CanvasRenderingContext2D/lineWidth +tags: + - API + - Canvas +translation_of: Web/API/CanvasRenderingContext2D/lineWidth +--- +<div>{{APIRef}}</div> + +<p>The <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineWidth</code></strong> 是 Canvas 2D API 设置线段厚度的属性（即线段的宽度）。</p> + +<div class="blockIndicator note"> +<p><strong>Note：</strong>线可以通过{{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, 和{{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} 方法绘制。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.lineWidth = value;</var></pre> + +<h3 id="选项">选项</h3> + +<dl> + <dt><code>value</code></dt> + <dd>描述线段宽度的数字。 0、 负数、 {{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 会被忽略。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="改变线宽">改变线宽</h3> + +<p>此示例使用15个单位的线宽绘制直线和矩形。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +ctx.lineWidth = 15; + +ctx.beginPath(); +ctx.moveTo(20, 20); +ctx.lineTo(130, 130); +ctx.rect(40, 40, 70, 70); +ctx.stroke(); +</pre> + +<h4 id="结果">结果</h4> + +<p>{{ EmbedLiveSample('改变线宽', 700, 180) }}</p> + +<h3 id="更多示例">更多示例</h3> + +<p>有关此属性的更多示例和说明，请参阅在“画布教程”中的<a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">使用样式和颜色</a>。</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linewidth", "CanvasRenderingContext2D.lineWidth")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.CanvasRenderingContext2D.lineWidth")}}</p> + +<h3 id="WebKitBlink-specific_注解">WebKit/Blink-specific 注解</h3> + +<ul> + <li>在基于 WebKit- 和 Blink- 的浏览器中，除了此属性外，实现了一个不标准的并且不赞成使用的方法 <code>ctx.setLineWidth()</code> 。</li> +</ul> + +<h3 id="Gecko-specific_注解">Gecko-specific 注解</h3> + +<ul> + <li>从 Gecko 2.0 {{geckoRelease("2.0")}}版本开始， 设置<code>lineWidth</code> 为负数不再抛出异常，所有非正数值都会被忽略。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li> + <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">使用样式和颜色</a></li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/measuretext/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/measuretext/index.html new file mode 100644 index 0000000000..071b712b0d --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/measuretext/index.html @@ -0,0 +1,71 @@ +--- +title: CanvasRenderingContext2D.measureText() +slug: Web/API/CanvasRenderingContext2D/measureText +tags: + - API + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/measureText +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code><span>.measureText()</span></code></strong> 方法返回一个关于被测量文本{{domxref("TextMetrics")}} 对象包含的信息（例如它的宽度）。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em></var>.measureText(text);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>text</dt> + <dd>需要测量的{{jsxref("String")}} 。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>{{domxref("TextMetrics")}} 对象。</p> + +<h2 id="示例">示例</h2> + +<p>给出 {{HTMLElement("canvas")}} 元素：</p> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<p>使用下面的代码，你能得到 {{domxref("TextMetrics")}} 对象：</p> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +var text = ctx.measureText("foo"); // TextMetrics object +text.width; // 16; +</pre> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.CanvasRenderingContext2D.measureText")}}</p> + +<h2 id="See_Also" name="See_Also">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> + <li>{{domxref("TextMetrics")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.html new file mode 100644 index 0000000000..0a888e19e8 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.html @@ -0,0 +1,166 @@ +--- +title: CanvasRenderingContext2D.miterLimit +slug: Web/API/CanvasRenderingContext2D/miterLimit +translation_of: Web/API/CanvasRenderingContext2D/miterLimit +--- +<div>{{APIRef}}</div> + +<p>The <code><strong>CanvasRenderingContext2D.miterLimit</strong></code> 是 Canvas 2D API 设置斜接面限制比例的属性。 当获取属性值时， 会返回当前的值（默认值是<code>10.0</code> ）。当给属性赋值时， 0、负数、 {{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 都会被忽略；除此之外都会被赋予一个新值。</p> + +<p>参见 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a> 中的 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> 章节。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.miterLimit = value;</var></pre> + +<h3 id="选项">选项</h3> + +<dl> + <dt><code>value</code></dt> + <dd>斜接面限制比例的的数字。 0、负数、{{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 都会被忽略。</dd> +</dl> + +<h2 id="简释">简释</h2> + +<pre>ctx.lineJoin = "miter" // "miter" > "round" ) "bevel" ] </pre> + +<p>只有当 lineJoin 显示为 ">" 时，miterLimit 才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 " ] " 类型来显示</p> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_lineWidth_property" name="Using_the_lineWidth_property">使用 <code>miterLimit</code> 属性</h3> + +<p>查看 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a> 中的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#A_demo_of_the_miterLimit_property">Applying styles and color</a> 章节，获取更多信息。</p> + +<div class="hidden"> +<h6 id="Playable_code" name="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.beginPath(); +ctx.moveTo(0,0); +ctx.lineWidth = 15; +ctx.lineTo(100, 100); +ctx.stroke();</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("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-miterlimit", "CanvasRenderingContext2D.miterLimit")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="WebKitBlink-specific_注解">WebKit/Blink-specific 注解</h3> + +<ul> + <li>在基与 WebKit- 和 Blink- 的浏览器中，除了此属性外，还实现了一个不标准的并且不赞成使用的方法 <code>ctx.setMiterLimit()</code> 。</li> +</ul> + +<h3 id="Gecko-specific_注解">Gecko-specific 注解</h3> + +<ul> + <li>从 Gecko 2.0 {{geckoRelease("2.0")}}版本开始， 给 <code>miterLimit</code> 设置负数不再抛出异常，所有的非正数都会被忽略。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/moveto/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/moveto/index.html new file mode 100644 index 0000000000..eb99c51967 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/moveto/index.html @@ -0,0 +1,166 @@ +--- +title: CanvasRenderingContext2D.moveTo() +slug: Web/API/CanvasRenderingContext2D/moveTo +translation_of: Web/API/CanvasRenderingContext2D/moveTo +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.moveTo()</code></strong> 是 Canvas 2D API 将一个新的子路径的起始点移动到(x，y)坐标的方法。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.moveTo(x, y);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>点的 x 轴。</dd> + <dt><code>y</code></dt> + <dd>点的 y 轴。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_moveTo_方法">使用 <code>moveTo</code> 方法</h3> + +<p>这是一段使用 <code>moveTo</code> 方法的简单的代码片段，移动画笔到起始点绘制一条线。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.beginPath(); +ctx.moveTo(50,50); +ctx.lineTo(200, 50); +ctx.stroke(); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.beginPath(); +ctx.moveTo(50,50); +ctx.lineTo(200, 50); +ctx.stroke()</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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineTo()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.html new file mode 100644 index 0000000000..2719f7901c --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.html @@ -0,0 +1,242 @@ +--- +title: CanvasRenderingContext2D.putImageData() +slug: Web/API/CanvasRenderingContext2D/putImageData +translation_of: Web/API/CanvasRenderingContext2D/putImageData +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.putImageData()</code></strong> 是 Canvas 2D API 将数据从已有的 {{domxref("ImageData")}} 对象绘制到位图的方法。 如果提供了一个绘制过的矩形，则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.putImageData(imagedata, dx, dy);</var> +void <var><em>ctx</em>.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);</var> +</pre> + +<h3 id="参数">参数</h3> + +<p><strong>imageData</strong></p> + +<p> {{domxref("ImageData")}} ，包含像素值的数组对象。</p> + +<dl> + <dt><code>dx</code></dt> + <dd>源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）。</dd> + <dt><code>dy</code></dt> + <dd>源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）。</dd> + <dt><code>dirtyX</code> {{optional_inline}}</dt> + <dd>在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（x 坐标）。</dd> + <dt><code>dirtyY</code> {{optional_inline}}</dt> + <dd>在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（y 坐标）。</dd> + <dt><code>dirtyWidth</code> {{optional_inline}}</dt> + <dd>在源图像数据中，矩形区域的宽度。默认是图像数据的宽度。</dd> + <dt><code>dirtyHeight</code> {{optional_inline}}</dt> + <dd>在源图像数据中，矩形区域的高度。默认是图像数据的高度。</dd> +</dl> + +<h3 id="抛出错误">抛出错误</h3> + +<dl> + <dt><code>NotSupportedError</code></dt> + <dd>如果任何一个变量被设置成无穷大，则会抛出此错误。</dd> + <dt><code>InvalidStateError</code></dt> + <dd>如果过图像数据对象的数据被分离，会抛出此错误。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="理解putImageData">理解<code>putImageData</code></h3> + +<p>通过{{domxref("CanvasRenderingContext2D.fillRect()")}}方法实现，更好地理解putImageData的执行算法. 获取更多信息，参见 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">使用Canvas控制像素</a> 和 {{domxref("ImageData")}} 对象。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +function putImageData(ctx, imageData, dx, dy, + dirtyX, dirtyY, dirtyWidth, dirtyHeight) { + var data = imageData.data; + var height = imageData.height; + var width = imageData.width; + dirtyX = dirtyX || 0; + dirtyY = dirtyY || 0; + dirtyWidth = dirtyWidth !== undefined? dirtyWidth: width; + dirtyHeight = dirtyHeight !== undefined? dirtyHeight: height; + var limitBottom = dirtyY + dirtyHeight; + var limitRight = dirtyX + dirtyWidth; + for (var y = dirtyY; y < limitBottom; y++) { + for (var x = dirtyX; x < limitRight; x++) { + var pos = y * width + x; + ctx.fillStyle = 'rgba(' + data[pos*4+0] + + ',' + data[pos*4+1] + + ',' + data[pos*4+2] + + ',' + (data[pos*4+3]/255) + ')'; + ctx.fillRect(x + dx, y + dy, 1, 1); + } + } +} + +// Draw content onto the canvas +ctx.fillRect(0,0,100,100); +// Create an ImageData object from it +var imagedata = ctx.getImageData(0,0,100,100); +// use the putImageData function that illustrates how putImageData works +putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.fillRect(0,0,100,100); +var imagedata = ctx.getImageData(0,0,100,100); +putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);</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); + +function putImageData(ctx, imageData, dx, dy, + dirtyX, dirtyY, dirtyWidth, dirtyHeight) { + var data = imageData.data; + var height = imageData.height; + var width = imageData.width; + dirtyX = dirtyX || 0; + dirtyY = dirtyY || 0; + dirtyWidth = dirtyWidth !== undefined? dirtyWidth: width; + dirtyHeight = dirtyHeight !== undefined? dirtyHeight: height; + var limitBottom = dirtyY + dirtyHeight; + var limitRight = dirtyX + dirtyWidth; + for (var y = dirtyY; y < limitBottom; y++) { + for (var x = dirtyX; x < limitRight; x++) { + var pos = y * width + x; + ctx.fillStyle = 'rgba(' + data[pos*4+0] + + ',' + data[pos*4+1] + + ',' + data[pos*4+2] + + ',' + (data[pos*4+3]/255) + ')'; + ctx.fillRect(x + dx, y + dy, 1, 1); + } + } +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-putimagedata", "CanvasRenderingContext2D.putImageData")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="兼容性注解">兼容性注解</h3> + +<ul> + <li>从 Gecko 10.0 {{ geckoRelease("10.0") }}开始，给任何参数设置非限定性的值并调用 <code>putImageData()</code> 将会被忽略，而不是抛出异常。</li> + <li>为了遵循说明，从 Gecko 16.0 {{geckoRelease("16.0")}}开始，使用无效的变量数量调用该方法（只有3个或7个数的变量是有效的）， 将会抛出一个错误 ({{bug(762657)}})。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> + <li>{{domxref("ImageData")}}</li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation with canvas</a></li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html new file mode 100644 index 0000000000..d1794c5043 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html @@ -0,0 +1,214 @@ +--- +title: CanvasRenderingContext2D.quadraticCurveTo() +slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo +tags: + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.quadraticCurveTo()</code></strong> 是 Canvas 2D API 新增二次贝塞尔曲线路径的方法。它需要2个点。 第一个点是控制点，第二个点是终点。 起始点是当前路径最新的点，当创建二次贝赛尔曲线之前，可以使用 <code>moveTo()</code> 方法进行改变。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.quadraticCurveTo(cpx, cpy, x, y);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>cpx</code></dt> + <dd>控制点的 x 轴坐标。</dd> + <dt><code>cpy</code></dt> + <dd>控制点的 y 轴坐标。</dd> + <dt><code>x</code></dt> + <dd>终点的 x 轴坐标。</dd> + <dt><code>y</code></dt> + <dd>终点的 y 轴坐标。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="quadraticCurveTo_如何工作"><code>quadraticCurveTo</code> 如何工作</h3> + +<p>这是一段绘制二次贝赛尔曲线的简单的代码片段。 <span style="color: red;">控制点是红色</span>，<span style="color: blue;">起点和终点是蓝色。</span></p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +// Quadratic Bézier curve +ctx.beginPath(); +ctx.moveTo(50, 20); +ctx.quadraticCurveTo(230, 30, 50, 100); +ctx.stroke(); + +// Start and end points +ctx.fillStyle = 'blue'; +ctx.beginPath(); +ctx.arc(50, 20, 5, 0, 2 * Math.PI); // Start point +ctx.arc(50, 100, 5, 0, 2 * Math.PI); // End point +ctx.fill(); + +// Control point +ctx.fillStyle = 'red'; +ctx.beginPath(); +ctx.arc(230, 30, 5, 0, 2 * Math.PI); +ctx.fill();</pre> + +<div class="hidden"> +<h2 id="Using_the_quadraticCurveTo_method">Using_the_quadraticCurveTo_method</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h3 id="JavaScript_2">JavaScript</h3> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +// Quadratic Bézier curve +ctx.beginPath(); +ctx.moveTo(50, 20); +ctx.quadraticCurveTo(230, 30, 50, 100); +ctx.stroke(); + +// Start and end points +ctx.fillStyle = 'blue'; +ctx.beginPath(); +ctx.arc(50, 20, 5, 0, 2 * Math.PI); // Start point +ctx.arc(50, 100, 5, 0, 2 * Math.PI); // End point +ctx.fill(); + +// Control point +ctx.fillStyle = 'red'; +ctx.beginPath(); +ctx.arc(230, 30, 5, 0, 2 * Math.PI); +ctx.fill();</pre> +</div> + +<p>{{ EmbedLiveSample('Using_the_quadraticCurveTo_method', 315, 165) }}</p> + +<h3 id="简单的二次曲线">简单的二次曲线</h3> + +<p>此示例使用<code>quadraticCurveTo()</code>绘制了简单的二次Bézier曲线。</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript_3">JavaScript</h4> + +<p>曲线从<code>moveTo()</code>指定的点开始: (20, 110)。 控制点位于(230, 150)。 曲线在(250, 20)处结束。</p> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +ctx.beginPath(); +ctx.moveTo(20, 110); +ctx.quadraticCurveTo(230, 150, 250, 20); +ctx.stroke(); +</pre> + +<h4 id="结果">结果</h4> + +<div class="hidden"> +<h2 id="Trying_the_quadraticCurveTo_parameters">Trying_the_quadraticCurveTo_parameters</h2> + +<h3 id="HTML_4">HTML</h3> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h3 id="JavaScript_4">JavaScript</h3> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +ctx.beginPath(); +ctx.moveTo(20, 110); +ctx.quadraticCurveTo(230, 150, 250, 20); +ctx.stroke(); +</pre> +</div> + +<div style="display: none;"> +<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.beginPath(); +ctx.moveTo(50,20); +ctx.quadraticCurveTo(230, 30, 50, 100); +ctx.stroke();</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('Trying_the_quadraticCurveTo_parameters', 700, 360) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求。</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}</p> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}</li> + <li><a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">WikiPedia article on Bézier curves</a>.</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/rect/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/rect/index.html new file mode 100644 index 0000000000..4053d0f387 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/rect/index.html @@ -0,0 +1,167 @@ +--- +title: CanvasRenderingContext2D.rect() +slug: Web/API/CanvasRenderingContext2D/rect +translation_of: Web/API/CanvasRenderingContext2D/rect +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong> 是 Canvas 2D API 创建矩形路径的方法，矩形的起点位置是 <em>(x, y) </em>，尺寸为 <em>width</em> 和 <em>height</em>。矩形的4个点通过直线连接，子路径做为闭合的标记，所以你可以填充或者描边矩形。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.rect(x, y, width, height);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>矩形起点的 x 轴坐标。</dd> + <dt><code>y</code></dt> + <dd>矩形起点的 y 轴坐标。</dd> + <dt><code>width</code></dt> + <dd>矩形的宽度。</dd> + <dt><code>height</code></dt> + <dd>矩形的高度。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_rect_方法">使用 <code>rect</code> 方法</h3> + +<p>这是一段简单的代码片段，使用 <code>rect </code>方法创建一条路径。 实际上，在 canvas 中绘制矩形路径， 你可以使用 {{domxref("CanvasRenderingContext2D.fill", "fill()")}} 或者 {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} 方法。 参见 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 和{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}} 方法， 只需一步即可绘制。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[3]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.rect(10, 10, 100, 100); +ctx.fill(); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.rect(10, 10, 100, 100); +ctx.fill();</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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillRect")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fill()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/removehitregion/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/removehitregion/index.html new file mode 100644 index 0000000000..1f9e7862a0 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/removehitregion/index.html @@ -0,0 +1,126 @@ +--- +title: CanvasRenderingContext2D.removeHitRegion() +slug: Web/API/CanvasRenderingContext2D/removeHitRegion +translation_of: Web/API/CanvasRenderingContext2D/removeHitRegion +--- +<div>{{APIRef}} {{obsolete_header}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.removeHitRegion()</code></strong> 是 Canvas 2D API 删除canvas中已存在的碰撞区域的方法。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.removeHitRegion(id);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>id</dt> + <dd>{{domxref("DOMString")}}字符串，描述将要被删除区域的 id。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_removeHitRegion_方法">使用 <code>removeHitRegion</code> 方法</h3> + +<p>这是一段使用 <code>removeHitRegion</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[8]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +// set a hit region +ctx.addHitRegion({id: "eyes"}); + +// remove it from the canvas +ctx.removeHitRegion("eyes"); +</pre> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-removehitregion", "CanvasRenderingContext2D.removeHitRegion")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}[1]</td> + <td>{{CompatGeckoDesktop(30)}} [2]</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{CompatGeckoDesktop(30)}} [2]</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="兼容性注解">兼容性注解</h3> + +<ul> + <li>[1] 此特性受控于特性标识。 设置标识 <code>ExperimentalCanvasFeatures</code> 为 <code>true</code> 进行启用。</li> + <li>[2] 此特性受控于特性偏好设置。在 about:config 中， 设置 <code>canvas.hitregions.enabled</code> 为 true。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</li> + <li>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.html new file mode 100644 index 0000000000..47a91eacbf --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.html @@ -0,0 +1,161 @@ +--- +title: CanvasRenderingContext2D.resetTransform() +slug: Web/API/CanvasRenderingContext2D/resetTransform +translation_of: Web/API/CanvasRenderingContext2D/resetTransform +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.resetTransform()</code></strong> 是 Canvas 2D API 使用单位矩阵重新设置当前变形的方法。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.resetTransform();</var> +</pre> + +<h2 id="示例">示例</h2> + +<h3 id="使用_resetTransform_方法">使用 <code>resetTransform</code> 方法</h3> + +<p>这是一段使用 <code>resetTransform</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[8]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.rotate(45 * Math.PI / 180); +ctx.fillRect(70,0,100,30); + +// reset current transformation matrix to the identity matrix +ctx.resetTransform(); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.rotate(45 * Math.PI / 180); +ctx.fillRect(70,0,100,30); +ctx.resetTransform();</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> + +<p>你可以使用 {{domxref("CanvasRenderingContext2D.setTransform()")}} 方法重新设置当前变形为单位矩阵，如下：</p> + +<pre class="brush: js">ctx.setTransform(1, 0, 0, 1, 0, 0);</pre> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-resettransform", "CanvasRenderingContext2D.resetTransform")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>31</td> + <td>{{CompatGeckoDesktop(36)}}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{CompatGeckoMobile(36)}}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/restore/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/restore/index.html new file mode 100644 index 0000000000..c35d6ce849 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/restore/index.html @@ -0,0 +1,161 @@ +--- +title: CanvasRenderingContext2D.restore() +slug: Web/API/CanvasRenderingContext2D/restore +translation_of: Web/API/CanvasRenderingContext2D/restore +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.restore()</code></strong> 是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态，将 canvas 恢复到最近的保存状态的方法。 如果没有保存状态，此方法不做任何改变。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.restore();</var></pre> + +<p>更多关于 <a href="/en-US/docs/Web/API/CanvasRenderingContext2D.save#Drawing_state">drawing state</a> 的信息， 请看 {{domxref("CanvasRenderingContext2D.save()")}}。</p> + +<h2 id="示例">示例</h2> + +<h3 id="使用_restore_方法">使用 <code>restore</code> 方法</h3> + +<p>这是一段简单的代码片段，使用 <code>save()</code> 方法保存默认的状态，使用 <code>restore()</code> 进行恢复。 所以，稍后你可以使用默认的状态绘制一个矩形。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[9]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.save(); // save the default state + +ctx.fillStyle = "green"; +ctx.fillRect(10, 10, 100, 100); + +ctx.restore(); // restore to the default state +ctx.fillRect(150, 75, 100, 100); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.save(); +ctx.fillStyle = "green"; +ctx.fillRect(10, 10, 100, 100); +ctx.restore(); +ctx.fillRect(150, 75, 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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-restore", "CanvasRenderingContext2D.restore")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> + <li>{{domxref("CanvasRenderingContext2D.save()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.html new file mode 100644 index 0000000000..f6ae42b495 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.html @@ -0,0 +1,172 @@ +--- +title: CanvasRenderingContext2D.rotate() +slug: Web/API/CanvasRenderingContext2D/rotate +tags: + - API + - Canvas + - CanvasRenderingContext2D + - 引用 + - 方法 +translation_of: Web/API/CanvasRenderingContext2D/rotate +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rotate()</code></strong> 是 Canvas 2D API 在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.rotate(angle);</var> +</pre> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;"></p> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>angle</code></dt> + <dd>顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： <code><em>degree</em> * Math.PI / 180</code> 。</dd> +</dl> + +<p>旋转中心点一直是 canvas 的起始点。 如果想改变中心点，我们可以通过 {{domxref("CanvasRenderingContext2D.translate", "translate()")}} 方法移动 canvas 。</p> + +<h2 id="示例">示例</h2> + +<h3 id="使用_rotate_方法">使用 <code>rotate</code> 方法</h3> + +<p>这是一段使用 <code>rotate</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.rotate(45 * Math.PI / 180); +ctx.fillRect(70,0,100,30); + +// reset current transformation matrix to the identity matrix +ctx.setTransform(1, 0, 0, 1, 0, 0); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.rotate(45 * Math.PI / 180); +ctx.fillRect(70,0,100,30); +ctx.setTransform(1, 0, 0, 1, 0, 0);</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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基础支持</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基础支持</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/save/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/save/index.html new file mode 100644 index 0000000000..167c40fd19 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/save/index.html @@ -0,0 +1,170 @@ +--- +title: CanvasRenderingContext2D.save() +slug: Web/API/CanvasRenderingContext2D/save +translation_of: Web/API/CanvasRenderingContext2D/save +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.save()</code></strong> 是 Canvas 2D API 通过将当前状态放入栈中，保存 canvas 全部状态的方法。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.save();</var></pre> + +<h2 id="绘制状态">绘制状态</h2> + +<p>保存到栈中的绘制状态有下面部分组成：</p> + +<ul> + <li>当前的变换矩阵。</li> + <li>当前的剪切区域。</li> + <li>当前的虚线列表.</li> + <li>以下属性当前的值： {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li> +</ul> + +<h2 id="示例">示例</h2> + +<h3 id="使用_save_方法">使用 <code>save</code> 方法</h3> + +<p>这是一段简单的代码片段，使用 <code>save</code> 方法保存默认的状态，这样，稍后你就可以使用默认的设置绘制一个矩形。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.save(); // 保存默认的状态 + +ctx.fillStyle = "green"; +ctx.fillRect(10, 10, 100, 100); + +ctx.restore(); // 还原到上次保存的默认状态 +ctx.fillRect(150, 75, 100, 100); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.save(); +ctx.fillStyle = "green"; +ctx.fillRect(10, 10, 100, 100); +ctx.restore(); +ctx.fillRect(150, 75, 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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> + <li>{{domxref("CanvasRenderingContext2D.restore()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html new file mode 100644 index 0000000000..db95fca214 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html @@ -0,0 +1,133 @@ +--- +title: CanvasRenderingContext2D.scale() +slug: Web/API/CanvasRenderingContext2D/scale +translation_of: Web/API/CanvasRenderingContext2D/scale +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.scale()</code></strong> 是 Canvas 2D API 根据 x 水平方向和 y 垂直方向，为canvas 单位添加缩放变换的方法。</p> + +<p>默认的， 在 canvas 中一个单位实际上就是一个像素。例如，如果我们将0.5作为缩放因子，最终的单位会变成0.5像素，并且形状的尺寸会变成原来的一半。相似的方式，我们将2.0作为缩放因子，将会增大单位尺寸变成两个像素。形状的尺寸将会变成原来的两倍。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">void <var><em>ctx</em>.scale(x, y);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>水平方向的缩放因子。A negative value flips pixels across the vertical axis. A value of <code>1</code> results in no horizontal scaling.</dd> + <dt>y</dt> + <dd>垂直方向的缩放因子。A negative value flips pixels across the horizontal axis. A value of <code>1</code> results in no vertical scaling.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Scaling_a_shape" name="Scaling_a_shape">使用 <code>scale</code> 方法</h3> + +<p>这是一段使用 <code>scale</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>The rectangle has a specified width of 8 and a height of 20. The transformation matrix scales it by 9x horizontally and by 3x vertically. Thus, its final size is a width of 72 and a height of 60.</p> + +<p>Notice that its position on the canvas also changes. Since its specified corner is (10, 10), its rendered corner becomes (90, 30).</p> + +<pre class="brush: js notranslate">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +// Scaled rectangle +ctx.scale(9, 3); +ctx.fillStyle = 'red'; +ctx.fillRect(10, 10, 8, 20); + +// Reset current transformation matrix to the identity matrix +ctx.setTransform(1, 0, 0, 1, 0, 0); + +// Non-scaled rectangle +ctx.fillStyle = 'gray'; +ctx.fillRect(10, 10, 8, 20);</pre> + +<h4 id="结果">结果</h4> + +<p>The scaled <span style="color: red;">rectangle is red</span>, and the <span style="color: gray;">non-scaled rectangle is gray</span>.</p> + +<p>{{ EmbedLiveSample('Scaling_a_shape', 700, 180) }}</p> + +<h3 id="Flipping_things_horizontally_or_vertically" name="Flipping_things_horizontally_or_vertically">使用 scale 水平或竖直翻转</h3> + +<p>你可以使用 <code>ctx.scale(-1, 1)</code> 水平翻转上下文，使用 <code>ctx.scale(1, -1)</code> 垂直翻转上下文。在这个例子中，"Hello world!" 被水平翻转。</p> + +<p>Note that the call to {{domxref("CanvasRenderingContext2D.fillText()", "fillText()")}} specifies a negative x coordinate. This is to adjust for the negative scaling factor: <code>-280 * -1</code> becomes <code>280</code>, and text is drawn leftwards from that point.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js; highlight:[4] notranslate">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +ctx.scale(-1, 1); +ctx.font = '48px serif'; +ctx.fillText('Hello world!', -280, 90); +ctx.setTransform(1, 0, 0, 1, 0, 0); +</pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('Flipping_things_horizontally_or_vertically', 700, 180) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.scale")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}</li> +</ul> + +<p> + <audio style="display: none;"></audio> +</p> + +<p> + <audio style="display: none;"></audio> +</p> + +<p> + <audio style="display: none;"></audio> +</p> + +<p> + <audio style="display: none;"></audio> +</p> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/scrollpathintoview/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/scrollpathintoview/index.html new file mode 100644 index 0000000000..222fb61aa0 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/scrollpathintoview/index.html @@ -0,0 +1,172 @@ +--- +title: CanvasRenderingContext2D.scrollPathIntoView() +slug: Web/API/CanvasRenderingContext2D/scrollPathIntoView +translation_of: Web/API/CanvasRenderingContext2D/scrollPathIntoView +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.scrollPathIntoView()</code></strong> 是 Canvas 2D API 将当前或给定的路径滚动到窗口的方法。类似于 {{domxref("Element.scrollIntoView()")}}。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.scrollPathIntoView();<var> +void <var><em>ctx</em>.<var>scrollPathIntoView</var>(path);</var></var></var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>path</code></dt> + <dd>使用的{{domxref("Path2D")}} 路径。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_scrollPathIntoView_方法">使用 scrollPathIntoView 方法</h3> + +<p>这是一段使用 <code>scrollPathIntoView</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.beginPath(); +ctx.fillRect(10, 10, 30, 30); +ctx.scrollPathIntoView(); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"> +<input id="button" type="range" min="1" max="12"> +</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.beginPath(); +ctx.rect(10, 10, 30, 30); +ctx.scrollPathIntoView();</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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scrollpathintoview", "CanvasRenderingContext2D.scrollPathIntoView")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}[1]</td> + <td>{{CompatNo}}<br> + {{bug(1120401)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}<br> + {{bug(1120401)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="兼容性注解">兼容性注解</h3> + +<ul> + <li>[1] 这个特性受控于特性标识。 设置标识 <code>ExperimentalCanvasFeatures</code> 为 <code>true</code> 进行启用。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> + <li>{{domxref("Element.scrollIntoView()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.html new file mode 100644 index 0000000000..710d8f9e53 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.html @@ -0,0 +1,183 @@ +--- +title: CanvasRenderingContext2D.setLineDash() +slug: Web/API/CanvasRenderingContext2D/setLineDash +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Dashes + - LInes + - Method + - setLineDash +translation_of: Web/API/CanvasRenderingContext2D/setLineDash +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API的{{domxref("CanvasRenderingContext2D")}}接口的<strong><code>setLineDash()</code></strong>方法在填充线时使用虚线模式。 它使用一组值来指定描述模式的线和间隙的交替长度。</p> + +<div class="blockIndicator note"> +<p><strong>提示：</strong>如果要切换回至实线模式，将 dash list 设置为一个空数组即可。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.setLineDash(segments);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>segments</code></dt> + <dd>一个{{jsxref("Array")}}数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， <code>[5, 15, 25]</code> 会变成 <code>[5, 15, 25, 5, 15, 25]。</code></dd> + <dt> + <h3 id="返回值">返回值</h3> + </dt> + <dd>{{jsxref("undefined")}}</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="基本示例">基本示例</h3> + +<p>这是一段简单的代码片段，使用 <code>setLineDash</code> 方法绘制一条线段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +// Dashed line +ctx.beginPath(); +ctx.setLineDash([5, 15]); +ctx.moveTo(0, 50); +ctx.lineTo(300, 50); +ctx.stroke(); + +// Solid line +ctx.beginPath(); +ctx.setLineDash([]); +ctx.moveTo(0, 100); +ctx.lineTo(300, 100); +ctx.stroke(); +</pre> + +<h4 id="结果">结果</h4> + +<div style="display: none;"> +<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.setLineDash([5, 15]); +ctx.beginPath(); +ctx.moveTo(0,100); +ctx.lineTo(400, 100); +ctx.stroke();</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('基本示例', 700, 360) }}</p> + +<h3 id="一些常见的模式">一些常见的模式</h3> + +<p>此示例说明了各种常见的线划线模式。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><code><canvas id="canvas"></canvas></code></pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>下面创建的<code>drawDashedLine()</code> 函数使得多个虚线的绘制变得简单。它接收模式数组作为其唯一参数。</p> + +<pre class="brush: js">function drawDashedLine(pattern) { + ctx.beginPath(); + ctx.setLineDash(pattern); + ctx.moveTo(0, y); + ctx.lineTo(300, y); + ctx.stroke(); + y += 20; +} + +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +let y = 15; + +drawDashedLine([]); +drawDashedLine([1, 1]); +drawDashedLine([10, 10]); +drawDashedLine([20, 5]); +drawDashedLine([15, 3, 3, 3]); +drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3]); +drawDashedLine([12, 3, 3]); // Equals [12, 3, 3, 12, 3, 3]</pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('一些常见的模式', 700, 180) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求。</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.setLineDash")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/settransform/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/settransform/index.html new file mode 100644 index 0000000000..23302386e7 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/settransform/index.html @@ -0,0 +1,129 @@ +--- +title: CanvasRenderingContext2D.setTransform() +slug: Web/API/CanvasRenderingContext2D/setTransform +translation_of: Web/API/CanvasRenderingContext2D/setTransform +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.setTransform()</code></strong> 是 Canvas 2D API 使用单位矩阵重新设置（覆盖）当前的变换并调用变换的方法，此变换由方法的变量进行描述。</p> + +<p>参见 {{domxref("CanvasRenderingContext2D.transform()", "transform()")}} 方法，这个方法不会覆盖当前的变换矩阵，会多次叠加变换。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">void <var><em>ctx</em>.setTransform(a, b, c, d, e, f);</var> +</pre> + +<p>变换矩阵的描述： <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math></p> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>a (m11)</code></dt> + <dd>水平缩放。</dd> + <dt><em><code>b (m12)</code></em></dt> + <dd>垂直倾斜。</dd> + <dt><code>c (m21)</code></dt> + <dd>水平倾斜。</dd> + <dt><code>d (m22)</code></dt> + <dd>垂直缩放。</dd> + <dt><code>e (dx)</code></dt> + <dd>水平移动。</dd> + <dt><code>f (dy)</code></dt> + <dd>垂直移动。</dd> +</dl> + +<p>较新的类型由单个参数矩阵组成，该参数表示要设置的2D转换矩阵（从技术上讲，是DOMMatrixInit对象；任何对象只要包含上述作为属性的组件，就可以执行操作）。</p> + +<h2 id="示例">示例</h2> + +<h3 id="使用_setTransform_方法">使用 <code>setTransform</code> 方法</h3> + +<p>这是一段使用 <code>setTransform</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4] notranslate">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.setTransform(1,1,0,1,0,0); +ctx.fillRect(0,0,100,100); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><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.setTransform(1,1,0,1,0,0); +ctx.fillRect(0,0,100,100);</textarea> +</pre> + +<pre class="brush: js notranslate">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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.setTransform")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.transform()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.html new file mode 100644 index 0000000000..db68cece53 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.html @@ -0,0 +1,174 @@ +--- +title: CanvasRenderingContext2D.shadowBlur +slug: Web/API/CanvasRenderingContext2D/shadowBlur +translation_of: Web/API/CanvasRenderingContext2D/shadowBlur +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.shadowBlur</code></strong> 是 Canvas 2D API 描述模糊效果程度的属性； 它既不对应像素值也不受当前转换矩阵的影响。 默认值是 0。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.shadowBlur = level;</var> +</pre> + +<dl> + <dt><code>level</code></dt> + <dd>描述模糊效果程度的，float 类型的值。默认值是 0。 负数、 {{jsxref("Infinity")}} 或者 {{jsxref("NaN")}} 都会被忽略。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_shadowBlur_property" name="Using_the_shadowBlur_property">使用 <code>shadowBlur</code> 属性</h3> + +<p>这是一段简单的代码片段，使用 <code>shadowblur 属性设置模糊阴影。</code> 注意：只有设置shadowColor属性值为不透明，阴影才会被绘制。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.shadowColor = "black"; +ctx.shadowBlur = 10; + +ctx.fillStyle = "white"; +ctx.fillRect(10, 10, 100, 100); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div class="hidden"> +<h6 id="Playable_code" name="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.shadowColor = "black"; +ctx.shadowBlur = 10; +ctx.fillStyle = "white"; +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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-shadowblur", "CanvasRenderingContext2D.shadowBlur")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="WebKitBlink-specific_注解">WebKit/Blink-specific 注解</h3> + +<ul> + <li>在基于 WebKit- 和 Blink- 的浏览器中，除了此属性外，还实现了一个不规范的并且不赞成使用的方法 <code>ctx.setShadow()</code> 。 + + <pre class="brush: js">setShadow(width, height, blur, color, alpha); +setShadow(width, height, blur, graylevel, alpha); +setShadow(width, height, blur, r, g, b, a); +setShadow(width, height, blur, c, m, y, k, a); +</pre> + </li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.html new file mode 100644 index 0000000000..7908d32141 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.html @@ -0,0 +1,176 @@ +--- +title: CanvasRenderingContext2D.shadowColor +slug: Web/API/CanvasRenderingContext2D/shadowColor +translation_of: Web/API/CanvasRenderingContext2D/shadowColor +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.shadowColor</code></strong> 是 Canvas 2D API 描述阴影颜色的属性。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.shadowColor = color;</var> +</pre> + +<dl> + <dt><code>color</code></dt> + <dd>可以转换成 CSS {{cssxref("<color>")}} 值的{{domxref("DOMString")}} 字符串。 默认值是 fully-transparent black.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_shadowColor_property" name="Using_the_shadowColor_property">使用 <code>shadowColor</code> 属性</h3> + +<p>这是一段简单的代码片段，使用 <code>shadowColor</code> 属性设置阴影的颜色。 注意：shadowColor属性设置成不透明的，并且 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、 {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}} 或者 {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} 属性不为0，阴影才会被绘制。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.shadowColor = "black"; +ctx.shadowOffsetY = 10; +ctx.shadowOffsetX = 10; + +ctx.fillStyle = "green" +ctx.fillRect(10, 10, 100, 100); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div class="hidden"> +<h6 id="Playable_code" name="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.shadowColor = "black"; +ctx.shadowOffsetY = 10; +ctx.shadowOffsetX = 10; +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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-shadowcolor", "CanvasRenderingContext2D.shadowColor")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="WebKitBlink-specific_注解">WebKit/Blink-specific 注解</h3> + +<ul> + <li>在基于 WebKit- 和 Blink- 的浏览器中，除了此属性外，还实现了一个不标准的并且不赞成使用的方法 <code>ctx.setShadow()</code> 。 + + <pre class="brush: js">setShadow(width, height, blur, color, alpha); +setShadow(width, height, blur, graylevel, alpha); +setShadow(width, height, blur, r, g, b, a); +setShadow(width, height, blur, c, m, y, k, a); +</pre> + </li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.html new file mode 100644 index 0000000000..0c22525ceb --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.html @@ -0,0 +1,166 @@ +--- +title: CanvasRenderingContext2D.shadowOffsetX +slug: Web/API/CanvasRenderingContext2D/shadowOffsetX +translation_of: Web/API/CanvasRenderingContext2D/shadowOffsetX +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.shadowOffsetX</code></strong> 是 Canvas 2D API 描述阴影水平偏移距离的属性。</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.shadowOffsetX = offset;</var> +</pre> + +<dl> + <dt><code>offset</code></dt> + <dd>阴影水平偏移距离的float类型的值。默认值是 0。 {{jsxref("Infinity")}} 或者{{jsxref("NaN")}}都会被忽略。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_shadowOffsetX_property" name="Using_the_shadowOffsetX_property">使用 <code>shadowOffsetX</code> 属性</h3> + +<p>这是一段简单的代码片段，使用 <code>shadowOffsetX</code> 属性设置阴影的水平偏移量。注意：将shadowColor属性设置成不透明，阴影才会被绘制。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.shadowColor = "black"; +ctx.shadowOffsetX = 10; +ctx.shadowBlur = 10; + +ctx.fillStyle = "green"; +ctx.fillRect(10, 10, 100, 100); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div class="hidden"> +<h6 id="Playable_code" name="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.shadowColor = "black"; +ctx.shadowOffsetX = 10; +ctx.shadowBlur = 10; +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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-shadowoffsetx", "CanvasRenderingContext2D.shadowOffsetX")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}.</li> + <li>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</li> + <li>{{domxref("CanvasRenderingContext2D.shadowColor")}}</li> + <li>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.html new file mode 100644 index 0000000000..61a9bc37a1 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.html @@ -0,0 +1,166 @@ +--- +title: CanvasRenderingContext2D.shadowOffsetY +slug: Web/API/CanvasRenderingContext2D/shadowOffsetY +translation_of: Web/API/CanvasRenderingContext2D/shadowOffsetY +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.shadowOffsetY</code></strong> 是 Canvas 2D API 描述阴影垂直偏移距离的属性。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.shadowOffsetY = offset;</var> +</pre> + +<dl> + <dt><code>offset</code></dt> + <dd>阴影垂直偏移距离的float类型的值。 默认值是 0。 {{jsxref("Infinity")}} 或者{{jsxref("NaN")}} 都会被忽略。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_shadowOffsetY_property" name="Using_the_shadowOffsetY_property">使用 <code>shadowOffsetY</code> 属性</h3> + +<p>这是一段简单的代码片段，使用 <code>shadowOffsetY</code> 属性绘制阴影垂直偏移量。注意：将shadowColor属性设置成不透明，阴影才会被绘制。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.shadowColor = "black"; +ctx.shadowOffsetY = 10; +ctx.shadowBlur = 10; + +ctx.fillStyle = "green"; +ctx.fillRect(10, 10, 100, 100); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div class="hidden"> +<h6 id="Playable_code" name="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.shadowColor = "black"; +ctx.shadowOffsetY = 10; +ctx.shadowBlur = 10; +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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-shadowoffsety", "CanvasRenderingContext2D.shadowOffsetY")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}.</li> + <li>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</li> + <li>{{domxref("CanvasRenderingContext2D.shadowColor")}}</li> + <li>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.html new file mode 100644 index 0000000000..0eaef6e3af --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.html @@ -0,0 +1,175 @@ +--- +title: CanvasRenderingContext2D.stroke() +slug: Web/API/CanvasRenderingContext2D/stroke +translation_of: Web/API/CanvasRenderingContext2D/stroke +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.stroke()</code></strong> 是 Canvas 2D API 使用非零环绕规则，根据当前的画线样式，绘制当前或已经存在的路径的方法。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.stroke();</var> +void <var><em>ctx</em>.stroke(path);</var> +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>path</code></dt> + <dd>绘制的路径{{domxref("Path2D")}} 。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_stroke_方法">使用 <code>stroke</code> 方法</h3> + +<p>这是一段简单的代码片段，使用 <code>stroke</code> 方法绘制一条路径。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.rect(10, 10, 100, 100); +ctx.stroke(); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.rect(10, 10, 100, 100); +ctx.stroke();</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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Path parameter</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop(31) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Path parameter</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile(31) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/strokerect/index.html new file mode 100644 index 0000000000..6cb5bf9f54 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/strokerect/index.html @@ -0,0 +1,110 @@ +--- +title: CanvasRenderingContext2D.strokeRect() +slug: Web/API/CanvasRenderingContext2D/strokeRect +tags: + - API + - Canvas +translation_of: Web/API/CanvasRenderingContext2D/strokeRect +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeRect()</code></strong> 是 Canvas 2D API 在 canvas 中，使用当前的绘画样式，描绘一个起点在 <em>(x, y)</em> 、宽度为<em> w</em> 、高度为 <em>h</em> 的矩形的方法。</p> + +<p>此方法直接绘制到画布而不修改当前路径，因此任何后续{{domxref("CanvasRenderingContext2D.fill()", "fill()")}} 或{{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}调用对它没有影响。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.strokeRect(x, y, width, height);</var> +</pre> + +<p><code>strokeRect()</code>方法绘制一个描边矩形，其起点为<code>(x, y)</code> ，其大小由宽度和高度指定。</p> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>矩形起点的 x 轴坐标。</dd> + <dt><code>y</code></dt> + <dd>矩形起点的 y 轴坐标。</dd> + <dt><code>width</code></dt> + <dd>矩形的宽度。正值在右侧，负值在左侧。</dd> + <dt><code>height</code></dt> + <dd>矩形的高度。正值在下，负值在上。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="一个简单的填充矩形">一个简单的填充矩形</h3> + +<p>这是一段使用 <code>strokeRect</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>矩形的左上角是（20,10）。它的宽度为160，高度为100。</p> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +ctx.strokeStyle = 'green'; +ctx.strokeRect(20, 10, 160, 100);</pre> + +<h4 id="结果">结果</h4> + +<p>{{ EmbedLiveSample('一个简单的填充矩形', 700, 180) }}</p> + +<h3 id="应用多种上下文设置">应用多种上下文设置</h3> + +<p>此示例绘制一个带有阴影和粗斜面轮廓的矩形。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><code><canvas id="canvas"></canvas></code></pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +ctx.shadowColor = '#d53'; +ctx.shadowBlur = 20; +ctx.lineJoin = 'bevel'; +ctx.lineWidth = 15; +ctx.strokeStyle = '#38f'; +ctx.strokeRect(30, 30, 160, 90);</pre> + +<h4 id="结果_2">结果</h4> + +<p>{{ EmbedLiveSample('应用多种上下文设置', 700, 180) }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.CanvasRenderingContext2D.strokeRect")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</li> + <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.html new file mode 100644 index 0000000000..f14889bf68 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.html @@ -0,0 +1,166 @@ +--- +title: CanvasRenderingContext2D.strokeStyle +slug: Web/API/CanvasRenderingContext2D/strokeStyle +tags: + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/strokeStyle +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeStyle</code></strong> 是 Canvas 2D API 描述画笔（绘制图形）颜色或者样式的属性。默认值是 <code>#000</code> (black)。</p> + +<p>参见 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a> 中的 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> 章节。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.strokeStyle = color; +</var><var><em>ctx</em>.strokeStyle = gradient; +</var><var><em>ctx</em>.strokeStyle = pattern;</var> +</pre> + +<h3 id="选项">选项</h3> + +<dl> + <dt><code>color</code></dt> + <dd>{{domxref("DOMString")}} 字符串，可以转换成 CSS {{cssxref("<color>")}} 值。</dd> + <dt><code>gradient</code></dt> + <dd>{{domxref("CanvasGradient")}} 对象（线性渐变或放射性渐变）。</dd> + <dt><code>pattern</code></dt> + <dd>{{domxref("CanvasPattern")}} 对象（可重复的图片）。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_strokeStyle_property" name="Using_the_strokeStyle_property">使用 <code>strokeStyle</code> 属性设置不同的颜色</h3> + +<p>这是一段简单的代码片段，使用 <code>strokeStyle</code> 属性设置不同的颜色。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.strokeStyle = "blue"; +ctx.strokeRect(10, 10, 100, 100); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div class="hidden"> +<h6 id="Playable_code" name="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.strokeStyle = "blue"; +ctx.strokeRect(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> + +<h3 id="A_strokeStyle_example" name="A_strokeStyle_example"><code>strokeStyle</code> 例子</h3> + +<p>这个例子使用 <code>strokeStyle 属性改变图形轮廓线的颜色。</code>我们使用 {{domxref("CanvasRenderingContext2D.arc", "arc()")}} 绘制圆形来代替正方形。</p> + +<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); +for (var i=0;i<6;i++){ + for (var j=0;j<6;j++){ + ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + + Math.floor(255-42.5*j) + ')'; + ctx.beginPath(); + ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<p>结果如下显示：</p> + +<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送请求请求。</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}</p> + +<div id="compat-mobile"></div> + +<h3 id="WebKitBlink-specific_注解">WebKit/Blink-specific 注解</h3> + +<ul> + <li>在基于 WebKit- 和 Blink- 的浏览器中，除了此属性外，还实现了一个不标准的并且不赞成使用的方法 <code>ctx.setStrokeColor()</code> 。 + + <pre class="brush: js">setStrokeColor(color, optional alpha); +setStrokeColor(grayLevel, optional alpha); +setStrokeColor(r, g, b, a); +setStrokeColor(c, m, y, k, a); +</pre> + </li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/stroketext/index.html new file mode 100644 index 0000000000..404998a247 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/stroketext/index.html @@ -0,0 +1,170 @@ +--- +title: CanvasRenderingContext2D.strokeText() +slug: Web/API/CanvasRenderingContext2D/strokeText +translation_of: Web/API/CanvasRenderingContext2D/strokeText +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeText()</code></strong> 是 Canvas 2D API 在给定的 <em>(x, y) </em>位置绘制文本的方法。如果提供了表示最大值的第四个参数，文本将会缩放适应宽度。</p> + +<p>参见 {{domxref("CanvasRenderingContext2D.fillText()")}} 方法填充文本。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.strokeText(text, x, y [, maxWidth]);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>text</code></dt> + <dd>使用当前 {{domxref("CanvasRenderingContext2D.font","font")}}，{{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}，{{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}和{{domxref("CanvasRenderingContext2D.direction","direction")}} 的值对文本进行渲染。</dd> +</dl> + +<dl> + <dt><code>x</code></dt> + <dd>文本起始点的 x 轴坐标。</dd> + <dt><code>y</code></dt> + <dd>文本起始点的 y 轴坐标。</dd> + <dt><code>maxWidth</code> {{optional_inline}}</dt> + <dd>需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体（如果通过水平缩放当前的字体，可以进行有效的或者合理可读的处理）或者小号的字体。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_strokeText_方法">使用 <code>strokeText</code> 方法</h3> + +<p>这是一个使用 <code>strokeText</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.font = "48px serif"; +ctx.strokeText("Hello world", 50, 100); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.font = "48px serif"; +ctx.strokeText("Hello world", 50, 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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatIE(9) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.9.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillText()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.html new file mode 100644 index 0000000000..bfeb7c5a73 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.html @@ -0,0 +1,180 @@ +--- +title: CanvasRenderingContext2D.textAlign +slug: Web/API/CanvasRenderingContext2D/textAlign +translation_of: Web/API/CanvasRenderingContext2D/textAlign +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textAlign</code></strong> 是 Canvas 2D API 描述绘制文本时，文本的对齐方式的属性。注意，该对齐是基于CanvasRenderingContext2D.fillText方法的x的值。所以如果textAlign="center"，那么该文本将画在 x-50%*width。</p> + +<blockquote> +<p>译者注：这里的textAlign="center"比较特殊。textAlign的值为center时候文本的居中是基于你在fillText的时候所给的x的值，也就是说文本一半在x的左边，一半在x的右边（可以理解为计算x的位置时从默认文字的左端，改为文字的中心，因此你只需要考虑x的位置即可）。所以，如果你想让文本在整个canvas居中，就需要将fillText的x值设置成canvas的宽度的一半。</p> +</blockquote> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var> +</pre> + +<h3 id="选项">选项</h3> + +<p>有效值：</p> + +<dl> + <dt>left</dt> + <dd>文本左对齐。</dd> + <dt>right</dt> + <dd>文本右对齐。</dd> + <dt>center</dt> + <dd>文本居中对齐。</dd> + <dt>start</dt> + <dd>文本对齐界线开始的地方 （左对齐指本地从左向右，右对齐指本地从右向左）。</dd> + <dt>end</dt> + <dd>文本对齐界线结束的地方 （左对齐指本地从左向右，右对齐指本地从右向左）。</dd> +</dl> + +<p>默认值是 <code>start。</code></p> + +<blockquote> +<p><code>译者注：direction属性会对此属性产生影响。如果direction属性设置为ltr，则left和start的效果相同，right和end的效果相同；如果direction属性设置为rtl，则left和end的效果相同，right和start的效果相同。</code></p> +</blockquote> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_textAlign_property" name="Using_the_textAlign_property">使用 <code>textAlign</code> 属性</h3> + +<p>这是一段简单的代码片段，使用 <code>textAlign</code> 属性设置文本的不同对齐方式。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.font = "48px serif"; +ctx.textAlign = "left"; +ctx.strokeText("Hello world", 0, 100); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div class="hidden"> +<h6 id="Playable_code" name="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.font = "48px serif"; +ctx.textAlign = "left"; +ctx.strokeText("Hello world", 0, 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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatIE(9) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.9.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.html new file mode 100644 index 0000000000..d5b7f3a5c6 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.html @@ -0,0 +1,130 @@ +--- +title: CanvasRenderingContext2D.textBaseline +slug: Web/API/CanvasRenderingContext2D/textBaseline +tags: + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/textBaseline +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textBaseline</code></strong> 是 Canvas 2D API 描述绘制文本时，当前文本基线的属性。</p> + +<blockquote> +<p>译者注：决定文字垂直方向的对齐方式。</p> +</blockquote> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";</var> +</pre> + +<h3 id="选项">选项</h3> + +<p>有效值：</p> + +<dl> + <dt>top</dt> + <dd>文本基线在文本块的顶部。</dd> + <dt>hanging</dt> + <dd>文本基线是悬挂基线。</dd> + <dt>middle</dt> + <dd>文本基线在文本块的中间。</dd> + <dt>alphabetic</dt> + <dd>文本基线是标准的字母基线。</dd> + <dt>ideographic</dt> + <dd>文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。</dd> + <dt>bottom</dt> + <dd>文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。</dd> +</dl> + +<p>默认值是 <code>alphabetic。</code></p> + +<h2 id="示例">示例</h2> + +<h3 id="Using_the_textBaseline_property" name="Using_the_textBaseline_property">使用 <code>textBaseline</code> 属性</h3> + +<p>这是一段简单的代码片段，使用 <code>textBaseline</code> 属性设置不同的文本基线。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas" width="550" height="500"></canvas></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom']; +ctx.font = '36px serif'; +ctx.strokeStyle = 'red'; + +baselines.forEach(function (baseline, index) { + ctx.textBaseline = baseline; + let y = 75 + index * 75; + ctx.beginPath(); + ctx.moveTo(0, y + 0.5); + ctx.lineTo(550, y + 0.5); + ctx.stroke(); + ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y); +});</pre> + + + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="550" height="500"></canvas></pre> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom']; +ctx.font = '36px serif'; +ctx.strokeStyle = 'red'; + +baselines.forEach(function (baseline, index) { + ctx.textBaseline = baseline; + let y = 75 + index * 75; + ctx.beginPath(); + ctx.moveTo(0, y + 0.5); + ctx.lineTo(550, y + 0.5); + ctx.stroke(); + ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y); +});</pre> +</div> + +<h4 id="结果">结果</h4> + +<p>{{ EmbedLiveSample('Playable_code', 700, 550) }}</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求。</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.textBaseline")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义，{{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/transform/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/transform/index.html new file mode 100644 index 0000000000..f56c5a48ff --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/transform/index.html @@ -0,0 +1,176 @@ +--- +title: CanvasRenderingContext2D.transform() +slug: Web/API/CanvasRenderingContext2D/transform +translation_of: Web/API/CanvasRenderingContext2D/transform +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.transform()</code></strong> 是 Canvas 2D API 使用矩阵多次叠加当前变换的方法，矩阵由方法的参数进行描述。你可以缩放、旋转、移动和倾斜上下文。</p> + +<p>参见 {{domxref("CanvasRenderingContext2D.setTransform()", "setTransform()")}} 方法，这个方法使用单位矩阵重新设置当前的变换并且会调用 <code>transform()。</code></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.transform(a, b, c, d, e, f);</var> +</pre> + +<p>变换矩阵的描述： <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math></p> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>a (m11)</code></dt> + <dd>水平缩放。</dd> + <dt><em><code>b (m12)</code></em></dt> + <dd>垂直倾斜。</dd> + <dt><code>c (m21)</code></dt> + <dd>水平倾斜。</dd> + <dt><code>d (m22)</code></dt> + <dd>垂直缩放。</dd> + <dt><code>e (dx)</code></dt> + <dd>水平移动。</dd> + <dt><code>f (dy)</code></dt> + <dd>垂直移动。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_transform_方法">使用 <code>transform</code> 方法</h3> + +<p>这是一段使用 <code>transform</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.transform(1,1,0,1,0,0); +ctx.fillRect(0,0,100,100); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.transform(1,1,0,1,0,0); +ctx.fillRect(0,0,100,100); +ctx.setTransform(); +</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; + ctx.setTransform(1, 0, 0, 1, 0, 0); + 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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.setTransform()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.html new file mode 100644 index 0000000000..f4dd697342 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.html @@ -0,0 +1,168 @@ +--- +title: CanvasRenderingContext2D.translate() +slug: Web/API/CanvasRenderingContext2D/translate +translation_of: Web/API/CanvasRenderingContext2D/translate +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API的<code><strong>CanvasRenderingContext2D</strong></code><strong><code>.translate()</code></strong> 方法对当前网格添加平移变换的方法。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.translate(x, y);</var> +</pre> + +<p><code>translate()</code> 方法, 将 canvas 按原始 x点的水平方向、原始的 y点垂直方向进行<strong>平移变换</strong></p> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;"></p> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>水平方向的移动距离。</dd> + <dt>y</dt> + <dd>垂直方向的移动距离。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="使用_translate_方法">使用 <code>translate</code> 方法</h3> + +<p>这是一段使用 <code>translate</code> 方法的简单的代码片段。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.translate(50, 50); +ctx.fillRect(0,0,100,100); + +// reset current transformation matrix to the identity matrix +ctx.setTransform(1, 0, 0, 1, 0, 0); +</pre> + +<p>修改下面的代码并在线查看 canvas 的变化：</p> + +<div style="display: none;"> +<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.translate(50, 50); +ctx.fillRect(0,0,100,100); +ctx.setTransform(1, 0, 0, 1, 0, 0);</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> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li> +</ul> |