From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../addhitregion/index.html | 307 ++++++++++++++ .../api/canvasrenderingcontext2d/arc/index.html | 218 ++++++++++ .../api/canvasrenderingcontext2d/arcto/index.html | 212 ++++++++++ .../canvasrenderingcontext2d/beginpath/index.html | 174 ++++++++ .../beziercurveto/index.html | 191 +++++++++ .../api/canvasrenderingcontext2d/canvas/index.html | 57 +++ .../clearhitregions/index.html | 121 ++++++ .../canvasrenderingcontext2d/clearrect/index.html | 110 +++++ .../api/canvasrenderingcontext2d/clip/index.html | 191 +++++++++ .../canvasrenderingcontext2d/closepath/index.html | 160 ++++++++ .../createimagedata/index.html | 107 +++++ .../createlineargradient/index.html | 156 +++++++ .../createpattern/index.html | 200 +++++++++ .../createradialgradient/index.html | 147 +++++++ .../currenttransform/index.html | 178 ++++++++ .../canvasrenderingcontext2d/direction/index.html | 103 +++++ .../drawfocusifneeded/index.html | 133 ++++++ .../canvasrenderingcontext2d/drawimage/index.html | 277 +++++++++++++ .../drawwidgetasonscreen/index.html | 89 ++++ .../canvasrenderingcontext2d/drawwindow/index.html | 105 +++++ .../canvasrenderingcontext2d/ellipse/index.html | 140 +++++++ .../api/canvasrenderingcontext2d/fill/index.html | 184 +++++++++ .../canvasrenderingcontext2d/fillrect/index.html | 179 ++++++++ .../canvasrenderingcontext2d/fillstyle/index.html | 170 ++++++++ .../canvasrenderingcontext2d/filltext/index.html | 170 ++++++++ .../api/canvasrenderingcontext2d/filter/index.html | 187 +++++++++ .../api/canvasrenderingcontext2d/font/index.html | 141 +++++++ .../getimagedata/index.html | 96 +++++ .../getlinedash/index.html | 124 ++++++ .../gettransform/index.html | 96 +++++ .../globalalpha/index.html | 217 ++++++++++ .../globalcompositeoperation/index.html | 143 +++++++ .../imagesmoothingenabled/index.html | 142 +++++++ .../imagesmoothingquality/index.html | 182 +++++++++ .../web/api/canvasrenderingcontext2d/index.html | 451 +++++++++++++++++++++ .../ispointinpath/index.html | 206 ++++++++++ .../ispointinstroke/index.html | 193 +++++++++ .../canvasrenderingcontext2d/linecap/index.html | 217 ++++++++++ .../linedashoffset/index.html | 162 ++++++++ .../canvasrenderingcontext2d/linejoin/index.html | 213 ++++++++++ .../api/canvasrenderingcontext2d/lineto/index.html | 166 ++++++++ .../canvasrenderingcontext2d/linewidth/index.html | 101 +++++ .../measuretext/index.html | 71 ++++ .../canvasrenderingcontext2d/miterlimit/index.html | 166 ++++++++ .../api/canvasrenderingcontext2d/moveto/index.html | 166 ++++++++ .../putimagedata/index.html | 242 +++++++++++ .../quadraticcurveto/index.html | 214 ++++++++++ .../api/canvasrenderingcontext2d/rect/index.html | 167 ++++++++ .../removehitregion/index.html | 126 ++++++ .../resettransform/index.html | 161 ++++++++ .../canvasrenderingcontext2d/restore/index.html | 161 ++++++++ .../api/canvasrenderingcontext2d/rotate/index.html | 172 ++++++++ .../api/canvasrenderingcontext2d/save/index.html | 170 ++++++++ .../api/canvasrenderingcontext2d/scale/index.html | 133 ++++++ .../scrollpathintoview/index.html | 172 ++++++++ .../setlinedash/index.html | 183 +++++++++ .../settransform/index.html | 129 ++++++ .../canvasrenderingcontext2d/shadowblur/index.html | 174 ++++++++ .../shadowcolor/index.html | 176 ++++++++ .../shadowoffsetx/index.html | 166 ++++++++ .../shadowoffsety/index.html | 166 ++++++++ .../api/canvasrenderingcontext2d/stroke/index.html | 175 ++++++++ .../canvasrenderingcontext2d/strokerect/index.html | 110 +++++ .../strokestyle/index.html | 166 ++++++++ .../canvasrenderingcontext2d/stroketext/index.html | 170 ++++++++ .../canvasrenderingcontext2d/textalign/index.html | 180 ++++++++ .../textbaseline/index.html | 130 ++++++ .../canvasrenderingcontext2d/transform/index.html | 176 ++++++++ .../canvasrenderingcontext2d/translate/index.html | 168 ++++++++ 69 files changed, 11506 insertions(+) create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/addhitregion/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/clearhitregions/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/currenttransform/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/drawwidgetasonscreen/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/drawwindow/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/font/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/getimagedata/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/linejoin/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/lineto/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/measuretext/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/moveto/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/rect/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/removehitregion/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/restore/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/save/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/scrollpathintoview/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/settransform/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/strokerect/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/stroketext/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/transform/index.html create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.html (limited to 'files/zh-cn/web/api/canvasrenderingcontext2d') 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 +--- +
{{APIRef}} {{obsolete_header}}
+ +

CanvasRenderingContext2D.addHitRegion() 是 Canvas 2D API 给位图添加点击区域的方法。 它允许你很容易地实现一个点击区域， 让你触发 DOM 元素的事件， 去探索看不见的画布。

+ +

语法

+ +
void ctx.addHitRegion(options);
+
+ +

选项

+ +

options 参数是可选的。 当赋值时， {{jsxref("Object")}} 包含以下属性：

+ +
+
path
+
{{domxref("Path2D")}} 对象， 描述点击区的区域范围。 如果不给此属性赋值， 则会使用当前的路径。
+
fillRule
+
遵循的填充规则（默认是“nonzero”）。
+
id
+
点击区的ID，在事件中可以引用此ID，就像示例中那样。
+
parentID
+
父区域的ID，为了光标回退或者辅助工具导航 。
+
cursor
+
鼠标移动到点击区时的 {{cssxref("cursor")}}  （默认是 "inherit"）。 继承父点击区域的光标，或者canvas元素的光标。
+
control
+
触发事件的元素（canvas的子孙元素）。 默认为 null。
+
label
+
如果没有control属性，文本标签作为辅助工具，用作点击区域的描述。 默认为 null。
+
role
+
 如果没有control属性，ARIA role 作为辅助工具，决定如何表示点击区域。 默认为 null.
+
+ +

示例

+ +

使用 addHitRegion 方法

+ +

这是一段使用 addHitRegion 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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();
+
+ +

修改下面的代码并在线查看canvas的变化（如果你没有看到全部的效果，请查看浏览器兼容性列表。如果你当前的浏览器支持点击区域，你需要激活偏好设置） 。

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 520) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-addhitregion", "CanvasRenderingContext2D.addHitRegion")}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop(30)}} [2]{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
id{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop(30)}} [2]{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
control{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop(30)}} [2]{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
path{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop(39)}} [2]{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
fillRule{{CompatVersionUnknown}}[1]{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
other hit region options{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo }}{{ CompatNo }}{{CompatGeckoMobile(30)}}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
id{{ CompatNo }}{{ CompatNo }}{{CompatGeckoMobile(30)}}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
control{{ CompatNo }}{{ CompatNo }}{{CompatGeckoMobile(30)}}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
path{{ CompatNo }}{{ CompatNo }}{{CompatGeckoMobile(39)}}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
fillRule{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
other hit region options{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

兼容性注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。

+ +

语法

+ +
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+ +

Parameters

+ +
+
x
+
圆弧中心（圆心）的 x 轴坐标。
+
y
+
圆弧中心（圆心）的 y 轴坐标。
+
radius
+
圆弧的半径。
+
startAngle
+
圆弧的起始点， x轴方向开始计算，单位以弧度表示。
+
endAngle
+
圆弧的终点， 单位以弧度表示。
+
anticlockwise {{optional_inline}}
+
可选的{{jsxref("Boolean")}}值 ，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。 
+
+ +

示例

+ +

使用 arc 方法

+ +

这是一段绘制圆的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.arc(75, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

不同的形状演示

+ +

在此例中，使用 arc() 尽可能地绘制不同的形状。

+ +
+
HTML
+ +
<canvas id="canvas" width="150" height="200"></canvas>
+
+ +
JavaScript
+
+ +
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();
+    }
+  }
+}
+ +

{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Gecko-specific 注解

+ +

从 Gecko 2.0 {{geckoRelease("2.0")}}开始：

+ + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.arcTo() 是 Canvas 2D API 根据控制点和半径绘制圆弧路径，使用当前的描点(前一个moveTo或lineTo等函数的止点)。根据当前描点与给定的控制点1连接的直线，和控制点1与控制点2连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径。

+ +

语法

+ +
void ctx.arcTo(x1, y1, x2, y2, radius);
+
+ +

Parameters

+ +
+
x1
+
第一个控制点的 x 轴坐标。
+
y1
+
第一个控制点的 y 轴坐标。
+
x2
+
第二个控制点的 x 轴坐标。
+
y2
+
第二个控制点的 y 轴坐标。
+
radius
+
圆弧的半径。
+
+ +

示例

+ +

使用 arcTo 方法

+ +

这是一段绘制圆弧的简单的代码片段。 基础点是蓝色的，两个控制点是红色的。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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();
+
+ +

{{ EmbedLiveSample('Using_the_arc_method', 315, 165) }}

+ +

尝试 arcTo 参数

+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Trying_the_arcTo_parameters', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arcto", "CanvasRenderingContext2D.arcTo")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.beginPath() 是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时，调用此方法。

+ +

语法

+ +
void ctx.beginPath();
+
+ +

示例

+ +

使用 beginPath 方法

+ +

这是一段受用 beginPath 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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();
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 460) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.bezierCurveTo() 是 Canvas 2D API 绘制三次贝赛尔曲线路径的方法。 该方法需要三个点。 第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 moveTo() 进行修改。

+ +

语法

+ +
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+
+ +

参数

+ +
+
cp1x
+
第一个控制点的 x 轴坐标。
+
cp1y
+
第一个控制点的 y 轴坐标。
+
cp2x
+
第二个控制点的 x 轴坐标。
+
cp2y
+
第二个控制点的 y 轴坐标。
+
x
+
结束点的 x 轴坐标。
+
y
+
结束点的 y 轴坐标。
+
+ +

示例

+ +

使用 bezierCurveTo 方法

+ +

这是一段绘制贝赛尔曲线的简单的代码片段。  控制点是红色的， 开始和结束点是蓝色的。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+ +

{{ EmbedLiveSample('使用_bezierCurveTo_方法', 315, 165) }}

+ +

尝试 bezierCurveTo 参数

+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('尝试_bezierCurveTo_参数', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beziercurveto", "CanvasRenderingContext2D.beziercurveto")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.canvas 属性是 Canvas API 的一部分，是对与给定上下文关联的{{domxref("HTMLCanvasElement")}}对象的只读引用。如果没有 {{HTMLElement("canvas")}} 元素与之对应，对象值为{{jsxref("null")}} 。

+ +

语法

+ +
ctx.canvas;
+ +

示例

+ +

给出 {{HTMLElement("canvas")}} 元素：

+ +
<canvas id="canvas"></canvas>
+
+ +

你可以通过CanvasRenderingContext2D调用内部的canvas属性，获取canvas的一个反向引用:

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.canvas // HTMLCanvasElement
+
+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{Compat("api.CanvasRenderingContext2D.canvas")}}

+ +

参见

+ + 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 +--- +
{{APIRef}} {{obsolete_header}}
+ +

CanvasRenderingContext2D.clearHitRegions() 是 Canvas 2D API 在画布中删除所有点击区域的方法。

+ +

语法

+ +
void ctx.clearHitRegions();
+
+ +

示例

+ +

使用 clearHitRegions 方法

+ +

这仅是一段简单的使用 clearHitRegions 方法的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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();
+
+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearhitregions", "CanvasRenderingContext2D.clearHitRegions")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop(38)}} [2]{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo }}{{ CompatNo }}{{CompatGeckoMobile(38)}} [2]{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

兼容性注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.clearRect()是Canvas 2D API的方法，这个方法通过把像素设置为透明以达到擦除一个矩形区域的目的。

+ +
+

注意: 如果没有依照 绘制路径 的步骤，使用 clearRect() 会导致意想之外的结果。请确保在调用 clearRect()之后绘制新内容前调用{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} 。

+
+ +

语法

+ +
void ctx.clearRect(x, y, width, height);
+
+ +

 clearRect() 方法在一个矩形区域内设置所有像素都是透明的(rgba(0,0,0,0))。这个矩形范围的左上角在 (x, y)，宽度和高度分别由 width 和height确定。

+ +

参数

+ +
+
x
+
矩形起点的 x 轴坐标。
+
y
+
矩形起点的 y 轴坐标。
+
width
+
矩形的宽度。
+
height
+
矩形的高度。
+
+ +

示例

+ +

清除整个画布

+ +

这段代码清除整个画布。这段代码通常在动画的每一帧开始被执行。清除的范围涵覆盖了整个 {{HtmlElement("canvas")}} 元素。

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+ctx.clearRect(0, 0, canvas.width, canvas.height);
+ +

清除一部分画布

+ +

这仅是一段简单地使用 clearRect 方法的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

下面代码中被清除的区域是一个矩形，它的左上点坐标在(10, 10)，宽度和高度分别是120和100像素。

+ +
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);
+ +

结果

+ +

{{EmbedLiveSample('Erasing_part_of_a_canvas', 700, 180)}}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.clearRect")}}

+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.clip() 是 Canvas 2D API 将当前创建的路径设置为当前剪切路径的方法。

+ +

语法

+ +
void ctx.clip();
+void ctx.clip(fillRule);
+void ctx.clip(path, fillRule);
+
+ +

参数

+ +

+ +
+
fillRule
+
这个算法判断一个点是在路径内还是在路径外。
+ 允许的值： + +
+
path
+
需要剪切的 {{domxref("Path2D")}} 路径。
+
+ +

示例

+ +

使用 clip 方法

+ +

这是一段简单的代码片段，使用 clip 方法创建剪切区域。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clip", "CanvasRenderingContext2D.clip")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Path parameter{{CompatUnknown}}{{ CompatGeckoDesktop(31) }}{{ CompatNo }}{{CompatUnknown}}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Path parameter{{CompatUnknown}}{{CompatUnknown}}{{ CompatGeckoMobile(31) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.closePath() 是 Canvas 2D API 将笔点返回到当前子路径起始点的方法。它尝试从当前点到起始点绘制一条直线。 如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。

+ +

语法

+ +
void ctx.closePath();
+
+ +

示例

+ +

使用 closePath 方法

+ +

这是一段使用 closePath 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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();
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 400) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.createImageData() 是 Canvas 2D API 创建一个新的、空白的、指定大小的 {{domxref("ImageData")}} 对象。 所有的像素在新对象中都是透明的。

+ +

语法

+ +
ImageData ctx.createImageData(width, height);
+ImageData ctx.createImageData(imagedata);
+
+ +

参数

+ +
+
width
+
{{domxref("ImageData")}} 新对象的宽度。
+
height
+
{{domxref("ImageData")}} 新对象的高度。
+
imagedata
+
从现有的 {{domxref("ImageData")}} 对象中，复制一个和其宽度和高度相同的对象。图像自身不允许被复制。
+
+ +

返回值

+ +

指定了宽度和高度的，新的 {{domxref("ImageData")}} 对象。 新对象使用透明的像素进行填充。

+ +

抛出错误

+ +
+
IndexSizeError
+
如果宽度或者高度变量值为零，会抛出此异常。
+
+ +

示例

+ +

使用 createImageData 方法

+ +

这是一段简单地使用 createImageData 方法的代码片段。 获取更多信息，请看 canvas像素控制 和 {{domxref("ImageData")}} 对象。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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] }
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createimagedata", "CanvasRenderingContext2D.createImageData")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容

+ + + +

{{Compat("api.CanvasRenderingContext2D.createImageData")}}

+ +

兼容性注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.createLinearGradient()方法创建一个沿参数坐标指定的直线的渐变。

+ +

+ +

该方法返回一个线性 {{domxref("CanvasGradient")}}对象。想要应用这个渐变，需要把这个返回值赋值给 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 或者 {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}。

+ +

语法

+ +
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
+
+ +

createLinearGradient() 方法需要指定四个参数，分别表示渐变线段的开始和结束点。

+ +

参数

+ +
+
x0
+
起点的 x 轴坐标。
+
y0
+
起点的 y 轴坐标。
+
x1
+
终点的 x 轴坐标。
+
y1
+
终点的 y 轴坐标。
+
+ +

返回值

+ +
+
{{domxref("CanvasGradient")}}
+
一个根据指定线路初始化的线性 CanvasGradient 对象。
+
+ +

示例

+ +

使用线性渐变填充一个矩形

+ +

这个例子使用createLinearGradient() 方法初始化了一个线性渐变。在这个线性渐变中添加了三种色彩。最后，这个渐变被赋值给上下文对应的属性，实现了对矩形的填充。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+ +

结果

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Filling_a_rectangle_with_a_linear_gradient', 700, 180) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}

+ + + +

Gecko特性说明

+ + + +


+ 参见

+ +
+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.createPattern() 是 Canvas 2D API 使用指定的图像 ({{domxref("CanvasImageSource")}})创建模式的方法。 它通过repetition参数在指定的方向上重复元图像。此方法返回一个{{domxref("CanvasPattern")}}对象。

+ +

语法

+ +
CanvasPattern ctx.createPattern(image, repetition);
+
+ +

参数

+ +
+
image
+
作为重复图像源的 {{domxref("CanvasImageSource")}} 对象。可以是下列之一： +
    +
  • {{domxref("HTMLImageElement")}} ({{HTMLElement("img")}}),
    • +
  • {{domxref("HTMLVideoElement")}} ({{HTMLElement("video")}}),
    • +
  • {{domxref("HTMLCanvasElement")}} ({{HTMLElement("canvas")}}),
    • +
  • {{domxref("CanvasRenderingContext2D")}},
    • +
  • {{domxref("ImageBitmap")}},
    • +
  • {{domxref("ImageData")}},
    • +
  • {{domxref("Blob")}}.
    • +
+
+
repetition
+
{{domxref("DOMString")}}，指定如何重复图像。允许的值有： +
    +
  • "repeat" (both directions),
    • +
  • "repeat-x" (horizontal only),
    • +
  • "repeat-y" (vertical only), 
    • +
  • "no-repeat" (neither).
    • +
+ 如果为空字符串 ('') 或 {{jsxref("null")}} (但不是 {{jsxref("undefined")}})，repetition将被当作"repeat"。
+
+ +

返回值

+ +
+
{{domxref("CanvasPattern")}}
+
描述模式的不透明对象
+
+ +

示例

+ +

使用createPattern方法

+ +

这是一段简单的代码片段，使用 createPattern 方法创建一个指定图像和重复的{{domxref("CanvasPattern")}} 对象。创建完成后，可以使用{{domxref("CanvasPattern.setTransform()")}}方法对图案进行变形。如示例所示，你可以把此模式赋值给当前的{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}，当你使用{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，会在 canvas 上绘制出效果。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+};
+
+ +

编辑以下代码并在线查看canvas变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 380) }}

+ +

规范描述

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createpattern", "CanvasRenderingContext2D.createPattern")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML Canvas 2D Context W3C', "#dom-context-2d-createpattern", "CanvasRenderingContext2D.createPattern")}}{{Spec2('HTML5 W3C')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.createRadialGradient() 是 Canvas 2D API 根据参数确定两个圆的坐标，绘制放射性渐变的方法。这个方法返回 {{domxref("CanvasGradient")}}。

+ +

语法

+ +
CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
+
+ +

参数

+ +
+
x0
+
开始圆形的 x 轴坐标。
+
y0
+
开始圆形的 y 轴坐标。
+
r0
+
开始圆形的半径。
+
x1
+
结束圆形的 x 轴坐标。
+
y1
+
结束圆形的 y 轴坐标。
+
r1
+
结束圆形的半径。
+
+ +

返回值

+ +
+
{{domxref("CanvasGradient")}}
+
由两个指定的圆初始化的放射性 CanvasGradient 对象。
+
+ +

示例

+ +

使用 createRadialGradient 方法

+ +

这是一段简单的代码片段， 使用 createRadialGradient 方法创建一个指定了开始和结束圆的 {{domxref("CanvasGradient")}} 对象。 一旦创建，你可以使用 {{domxref("CanvasGradient.addColorStop()")}} 方法根据指定的偏移和颜色定义一个新的终止。你可以将当前的{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}设置成此渐变， 当使用{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，会在canvas上绘制出效果， 如示例所示。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看 canvas的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createradialgradient", "CanvasRenderingContext2D.createRadialGradient")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.createRadialGradient")}}

+ +
+ +

Gecko-specific 注解

+ + + +

参见

+ + 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 +--- +
{{APIRef()}} {{SeeCompatTable}}
+ +

CanvasRenderingContext2D.currentTransform 属性，表示当前变换的矩阵。可以通过Canvas2D API 返回或者赋值为{{domxref("SVGMatrix")}}对象。

+ +

语法

+ +
ctx.currentTransform [= value];
+
+ +
+
参考
+
{{domxref("SVGMatrix")}} 对象表示当前变换的矩阵。
+
+ +

示例

+ +

使用currentTransform 的方式

+ +

这是一段简单的代码片段，使用currentTransform属性设置变换矩阵。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看canvas的变化（确定使用支持这段代码特征的浏览器，可以查看兼容性列表）:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 420) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-currenttransform", "CanvasRenderingContext2D.currentTransform")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}} [1]{{CompatNo}}
+ {{bug(928150)}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Chrome-specific注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

CanvasRenderingContext2D.direction 是Canvas 2D API 用来在绘制文本时，描述当前文本方向的属性。

+ +

语法

+ +
ctx.direction = "ltr" || "rtl" || "inherit";
+
+ +

选项

+ +

有效值:

+ +
+
ltr
+
文本方向从左向右。
+
rtl
+
文本方向从右向左。
+
inherit
+
根据情况继承 {{HTMLElement("canvas")}} 元素或者 {{domxref("Document")}} 。
+
+ +

默认值是inherit。

+ +

示例

+ +

使用direction 属性

+ +

这是一段简单的代码片段，对文本设置不同的direction数值。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
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);
+ + + + + +

结果

+ +

{{ EmbedLiveSample('Playable_code', 700, 180) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.direction")}}

+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.drawFocusIfNeeded() 是 Canvas 2D API 用来给当前路径或特定路径绘制焦点的方法，如果给定的元素获取了焦点。

+ +

语法

+ +
void ctx.drawFocusIfNeeded(element);
+void ctx.drawFocusIfNeeded(path, element);
+
+ +

参数

+ +
+
element
+
是否需要设置焦点的元素。
+
path
+
{{domxref("Path2D")}} 路径。
+
+ +

示例

+ +

使用 drawFocusIfNeeded 方法

+ +

这是一段使用 drawFocusIfNeeded 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas">
+  <input id="button" type="range" min="1" max="12">
+</canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看 canvas的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{EmbedLiveSample('Playable_code', 700, 360)}}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawfocusifneeded", "CanvasRenderingContext2D.drawFocusIfNeeded")}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.drawFocusIfNeeded")}}

+ +

兼容性注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多种方式在Canvas上绘制图像。

+ +

语法

+ +
void ctx.drawImage(image, dx, dy);
+void ctx.drawImage(image, dx, dy, dWidth, dHeight);
+void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+
+ +

drawImage

+ +

参数

+ +
+
image
+
绘制到上下文的元素。允许任何的 canvas 图像源({{domxref("CanvasImageSource")}})，例如：{{domxref("CSSImageValue")}}，{{domxref("HTMLImageElement")}}，{{domxref("SVGImageElement")}}，{{domxref("HTMLVideoElement")}}，{{domxref("HTMLCanvasElement")}}，{{domxref("ImageBitmap")}} 或者{{domxref("OffscreenCanvas")}}。
+
sx{{optional_inline}}
+
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 X 轴坐标。
+
sy{{optional_inline}}
+
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 Y 轴坐标。
+
sWidth{{optional_inline}}
+
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的sx和sy开始，到image的右下角结束。
+
sHeight{{optional_inline}}
+
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。
+
dx
+
image的左上角在目标canvas上 X 轴坐标。
+
dy
+
image的左上角在目标canvas上 Y 轴坐标。
+
dWidth{{optional_inline}}
+
image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。
+
dHeight{{optional_inline}}
+
image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image高度不会缩放。
+
+ +

抛出异常

+ +
+
INDEX_SIZE_ERR
+
如果 canvas 或者图像矩形区域的宽度或高度为0 。
+
INVALID_STATE_ERR
+
图像没有数据。
+
TYPE_MISMATCH_ERR
+
提供的原始元素不支持。
+
NS_ERROR_NOT_AVAILABLE
+
图像尚未加载。使用.complete === true和.onload确定何时准备就绪。
+
+ +

示例

+ +

使用 drawImage 方法

+ +

这是一段使用 drawImage 方法的简单的代码片段。

+ +

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>
+
+ +

JavaScript

+ +
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);
+
+ + + +

结果

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Drawing_an_image_to_the_canvas', 700, 180) }}

+ +

理解源元素大小

+ +

drawImage()方法在绘制时使用源元素的CSS大小。

+ +

例如，如果加载图像并在其构造函数中指定可选的大小参数，则必须使用所创建实例的naturalWidth和naturalHeight属性来正确计算裁剪和缩放区域等内容，而不是element.width和element.height。如果元素是{{htmlelement("video")}} 元素，则videoWidth和videoHeight也是如此，依此类推。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
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);
+}
+
+ + + +

结果

+ +

{{EmbedLiveSample('Understanding_source_element_size', 700, 260)}}

+ +

规范说明

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +

{{Compat("api.CanvasRenderingContext2D.drawImage")}}

+ +

兼容性注解

+ + + +

Notes

+ + + +

参见

+ + 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 +--- +
{{APIRef}} {{non-standard_header}}
+ +
这个内部使用非标准的Canvas 2D API 的方法CanvasRenderingContext2D.drawWidgetAsOnScreen()为Canvas（画布）上的窗口提供了根部件。不像{{domxref("CanvasRenderingContext2D.drawWindow", "drawWindow()")}}这个API，它使用操作系统来获取屏幕上部件的快照而不是从Gecko自己的组合中读取
+ +

 

+ +

这个API用在Web内容上。它只支持Windows系统中Chrome进程中使用OMTC的小部件

+ +

句法

+ +
void ctx.drawWidgetAsOnScreen(window);
+
+ +

参数

+ +
+
window
+
 {{domxref("Window")}} 提供.
+
+ +

说明

+ +

不是当前规范或者草案的一部分. 这是一个内部使用的无标准的API.

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop(41)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(41)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参见

+ + 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 +--- +
{{APIRef}} {{deprecated_header}}
+ +

CanvasRenderingContext2D.drawWindow() 是 Canvas 2D API 在 canvas 内部画布上渲染一个窗体区域的已弃用的非标准接口。 用来渲染窗口可视区的内容，忽略窗口的剪切和滚动。

+ +

这个API 不能在 Web 内容中应用。它是一个同步的 API，并且由于它不能对裂变的跨域 iframe （译者注：我也不知道这裂变是个啥），如果你的浏览器扩展中使用这一 API 的话，建议你改用 {{WebExtAPIRef('tabs.captureTab')}} 。如果你的代码是针对 chrome 的话，用来自父进程的 WindowGlobalParent.drawSnapshot  接口可能会更合适。

+ +

语法

+ +
void ctx.drawWindow(window, x, y, w, h, bgColor[, flags]);
+ +

参数

+ +
+
window
+
需要渲染的{{domxref("Window")}} 。
+
x
+
窗体的 X 坐标。
+
y
+
窗体的 Y 坐标。
+
w
+
窗体的宽度。
+
h
+
窗体的高度。
+
bgColor
+
{{domxref("DOMString")}}，描述当窗体渲染到canvas之前，进行填充的颜色。 颜色可以是透明/半透明。 它被赋值为CSS 颜色字符串（例如： rgb() 或者 rgba()）。
+ 注意： +
    +
  • 如果"rgba(0,0,0,0)"用来当背景色， 图像透明的地方窗体也是透明的。
    • +
  • 顶级的预览文档通常不会是透明的，因为用户的背景色偏好设置会被应用。但是{{HTMLElement("iframe", "iframes")}} 是透明的，如果页面没有设置背景。
    • +
  • 如果不透明的颜色做为背景色， 渲染速度会更快，因为我们不需要计算窗体的透明度。 
    • +
+
+
flags {{optional_inline}}
+
用来更好的控制 drawWindow 。 Flags 可以使用或运算符进行连接。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
常量值描述
DRAWWINDOW_DRAW_CARET0x01绘制时，如果被占用，显示插入符。
DRAWWINDOW_DO_NOT_FLUSH0x02不要清空待定的布局通知，否则会被批量挂起。
DRAWWINDOW_DRAW_VIEW0x04绘制滚动条，并滚动当前的视口。
DRAWWINDOW_USE_WIDGET_LAYERS0x08使用小部件层进行有效的管理。这意味着可以使用硬件加速， 但是实际上会变慢，并且降低品质。不管怎样，它都会更准确地反映已经渲染到屏幕上的像素。
DRAWWINDOW_ASYNC_DECODE_IMAGES0x10不需要同步解码图像 - 绘制我们已经有的。
+
+
+ +

示例

+ +

这个方法在canvas中绘制了一个DOM 窗口的内容快照。例子：

+ +
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+
+ +

以像素为单位，相对可视区左上角的矩形框内，使用白色作为背景色，在canvas中绘制当前窗口的内容。如果指定"rgba(255,255,255,0)" 作为颜色，则内容的背景色是透明的（造成绘制速度变慢）。

+ +

使用纯白色"rgb(255,255,255)"或者透明颜色之外的任何背景，都不是一个好的主意。就像所有浏览器要做的，多数网站期望他们界面透明的部分绘制到白色背景上。

+ +

使用这个方法，可以使用任意内容填充隐藏的IFRAME（例如：CSS-styled HTML text 或者 SVG）并绘制到canvas中。为了适应当前的变形，它会缩放、旋转。

+ +

Ted Mielczarek 的 标签预览 扩展使用这种技术，在 chrome 中提供网页的缩略图。源代码可以作为参考。

+ +

规范描述

+ +

目前的规范或者草案不包含此章节。这是一个不标准的、仅供内部使用的API。

+ +

浏览器兼容性

+ +

{{Compat("api.CanvasRenderingContext2D.drawWindow")}}
+ 参见

+ +
+ + 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 +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

CanvasRenderingContext2D.ellipse() 是 Canvas 2D API 添加椭圆路径的方法。椭圆的圆心在（x,y）位置，半径分别是radiusX 和 radiusY ，按照anticlockwise（默认顺时针）指定的方向，从 startAngle  开始绘制，到 endAngle 结束。

+ +

语法

+ +
void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+
+ +

参数

+ +
+
x
+
椭圆圆心的 x 轴坐标。
+
y
+
椭圆圆心的 y 轴坐标。
+
radiusX
+
椭圆长轴的半径。
+
radiusY
+
椭圆短轴的半径。
+
rotation
+
椭圆的旋转角度，以弧度表示(非角度度数)。
+
startAngle
+
将要绘制的起始点角度，从 x 轴测量，以弧度表示(非角度度数)。
+
endAngle
+
椭圆将要绘制的结束点角度，以弧度表示(非角度度数)。
+
anticlockwise {{optional_inline}}
+
{{jsxref("Boolean")}} 选项，如果为 true，逆时针方向绘制椭圆 （逆时针）， 反之顺时针方向绘制。
+
+ +

示例

+ +

使用 ellipse 方法

+ +

这是一段绘制椭圆的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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();
+ +

修改下面的代码并在线查看 canvas 的变化（如果椭圆没有绘制，请在兼容性列表中检查你的浏览器是否支持）：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.ellipse")}}

+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.fill() 是 Canvas 2D API 根据当前的填充样式，填充当前或已存在的路径的方法。采取非零环绕或者奇偶环绕规则。

+ +

语法

+ +
void ctx.fill();
+void ctx.fill(fillRule);
+void ctx.fill(path, fillRule);
+
+ +

参数

+ +
+
fillRule
+
一种算法，决定点是在路径内还是在路径外。
+ 允许的值： + +
+
path
+
需要填充的{{domxref("Path2D")}} 路径。
+
+ +

示例

+ +

使用 fill 方法

+ +

这是一段简单的代码片段， 使用 fill 方法填充路径。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+ +

修改下面的代码并在线查看 canvas 变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Path parameter{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(31) }}{{ CompatNo }}{{ CompatVersionUnknown() }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Path parameter{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile(31) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.fillRect() 是Canvas 2D API 绘制填充矩形的方法。当前渲染上下文中的fillStyle 属性决定了对这个矩形对的填充样式。
+
+ 这个方法是直接在画布上绘制填充，并不修改当前路径，所以在这个方法后面调用 {{domxref("CanvasRenderingContext2D.fill()", "fill()")}} 或者{{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}方法并不会对这个方法有什么影响。

+ +

语法

+ +
void ctx.fillRect(x, y, width, height);
+
+ +

fillRect()方法绘制一个填充了内容的矩形，这个矩形的开始点（左上点）在(x, y) ，它的宽度和高度分别由width 和 height 确定，填充样式由当前的fillStyle 决定。

+ +

参数

+ +
+
x
+
矩形起始点的 x 轴坐标。
+
y
+
矩形起始点的 y 轴坐标。
+
width
+
矩形的宽度。
+
height
+
矩形的高度。
+
+ +

示例

+ +

一个填充矩形的例子

+ +

这个例子使用fillRect()方法绘制了一个用绿色填充的矩形。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

下面绘制的矩形左上顶点在(20, 10)，宽高分别是150和100像素。

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+ctx.fillStyle = 'green';
+ctx.fillRect(20, 10, 150, 100);
+ +

结果

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('A_simple_filled_rectangle', 700, 180) }}

+ +

填充整个画布

+ +

下面这个代码片段使用本方法填充了整个画布。这样做通常的目的是在开始绘制其他内容前设置一个背景。为了达到这样的效果，需要让填充的范围和画布的范围相同，需要访问{{HtmlElement("canvas")}}元素的width 和 height 属性。

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ +

规范描述

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.fillStyle 是Canvas 2D API 使用内部方式描述颜色和样式的属性。默认值是 #000 （黑色）。

+ +

参见  Canvas Tutorial 的 Applying styles and color 章节。

+ +

语法

+ +
ctx.fillStyle = color;
+ctx.fillStyle = gradient;
+ctx.fillStyle = pattern;
+
+ +

选项

+ +
+
color
+
{{domxref("DOMString")}} 字符串，被转换成 CSS {{cssxref("<color>")}} 颜色值.
+
gradient
+
{{domxref("CanvasGradient")}} 对象 （线性渐变或者放射性渐变）.
+
pattern
+
{{domxref("CanvasPattern")}} 对象 （可重复图像）。
+
+ +

示例

+ +

使用 fillStyle 属性设置不同的颜色

+ +

这是一段简单的代码片段，使用 fillStyle 属性设置不同的颜色。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "blue";
+ctx.fillRect(10, 10, 100, 100);
+
+ +

修改下面的代码并在线查看canvas的变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

fillStyle 使用 for 循环的例子

+ +

在这个例子中， 我们使用两个 for 循环绘制一个矩形表格，每个单元格都有不同的颜色。 最终的结果图像看起来像屏幕截图，其实没有令人惊叹的事情发生。我们使用两个变量 i 和 j 为每一个单元格生成唯一的RGB颜色，并且只改变红色和绿色的数值。蓝色通道的值是固定不变的。通过修改这些通道，你能生成各种各样的调色板。通过逐步地增加，你能实现类似 Photoshop 的调色板。

+ + + +
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);
+  }
+}
+
+ +

结果看起来像是这样的：

+ +

{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

规格描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.fillStyle")}}

+ +
+ + + + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.fillText() 是 Canvas 2D API 在 (x, y)位置填充文本的方法。如果选项的第四个参数提供了最大宽度，文本会进行缩放以适应最大宽度。

+ +

参见 {{domxref("CanvasRenderingContext2D.strokeText()")}} 方法对文本进行描边。

+ +

语法

+ +
void ctx.fillText(text, x, y, [maxWidth]);
+
+ +

参数

+ +
+
text
+
使用当前的 {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}} 和 {{domxref("CanvasRenderingContext2D.direction","direction")}} 值对文本进行渲染。
+
+ +
+
x
+
文本起点的 x 轴坐标。
+
y
+
文本起点的 y 轴坐标。
+
maxWidth {{optional_inline}}
+
绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。
+
+ +

示例

+ +

使用 fillText 方法

+ +

这是一段使用 fillText 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.fillText("Hello world", 50, 100);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE(9) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

参见

+ + 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 +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

CanvasRenderingContext2D.filter 是Canvas 2D API 提供模糊、灰度等过滤效果的属性 。它类似于 CSS filter 属性，并且接受相同的函数。

+ +

语法

+ +
ctx.filter = "<filter-function1> [<filter-function2] [<filter-functionN]";
+ctx.filter = "none";
+
+ +

Filter 函数

+ +

filter 属性接受{{domxref("DOMString")}}字符串，可以包含一个或多个 filter 函数 。

+ +
+
url(<url>)
+
url() 函数接受一个描述SVG过滤器的XML文件的位置， 并且可以包含一个针对特殊过滤元素的锚点。
+
blur(<length>)
+
length：CSS 长度。 给绘图提供一个高斯模糊。
+
brightness(<percentage>)
+
Percentage：百分比。 给绘图提供一个线性乘法，调节亮度的高低。
+
contrast(<percentage>)
+
Percentage：百分比。 调节图像的对比度。 当数值为 0% 时，图像会完全变黑。当数值为 100% 时，图像没有任何变化。
+
drop-shadow(<offset-x>, <offset-y>, <blur-radius>, <spread-radius>, <color>)
+
给绘图提供阴影。 阴影事实上是在图像下面呈现出模糊的，通过对图像的透明遮罩进行偏移绘制出一种特殊的颜色，组合而成的效果。 这个函数接受5个参数： +
    +
  • <offset-x>: 查看 {{cssxref("<length>")}} 允许的单位。描述阴影的水平距离。
    • +
  • <offset-y>: 查看 {{cssxref("<length>")}} 允许的单位。描述阴影的垂直距离。
    • +
  • <blur-radius>: 数值越大，模糊就越大，从而使阴影范围变得更大颜色变得更浅。不允许为负数。
    • +
  • <spread-radius>: 正数会使阴影扩张变大，负数会使阴影收缩。
    • +
  • <color>: 查看 {{cssxref("<color>")}} 允许的关键字和标识符。
    • +
+
+
grayscale(<percentage>)
+
Percentage：百分比。将图像转换成灰色的图片。 当值为100%时，图像会完全变成灰色。 当值为0%时，图像没有任何变化。
+
hue-rotate(<degree>)
+
Degree：度数。 对图像进行色彩旋转的处理。当值为0度时，图像没有任何变化。
+
invert(<percentage>)
+
Percentage：百分比。反色图像（呈现出照片底片的效果）。当值为100%时，图像会完全反色处理。当值为0%时，图像没有任何变化。
+
opacity(<percentage>)
+
Percentage：百分比。对图像进行透明度的处理。 当值为0%时，图像完全透明。当值为100%时，图像没有任何变化。
+
saturate(<percentage>)
+
对图像进行饱和度的处理。当值为0%时，图像完全不饱和。当值为100%时，图像没有任何变化。
+
sepia(<percentage>)
+
对图像进行深褐色处理（怀旧风格）。 当值为100%时，图像完全变成深褐色。当值为0%时，图像没有任何变化。
+
none
+
没有使用filter。
+
+ +

示例

+ +

使用 filter 属性

+ +

这是一段使用 filter 属性的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.filter = "blur(5px)";
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);
+
+ +

修改下面的代码并在线查看canvas的变化 (确保你的浏览器提供这些特性，查看浏览器兼容性列表):

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ +

当前的规范或草案不包含此内容， 但是正考虑进行标准化。参考 CSS Filter Effects 规范。

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{ CompatGeckoDesktop("35") }} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("35") }} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Gecko-specific 注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.font 是 Canvas 2D API 描述绘制文字时，当前字体样式的属性。 使用和 CSS font 规范相同的字符串值。

+ +

语法

+ +
ctx.font = value;
+
+ +

选项

+ +
+
value
+
符合CSS {{cssxref("font")}} 语法的{{domxref("DOMString")}} 字符串。默认字体是 10px sans-serif。
+
+ +

示例

+ +

使用自定义字体

+ +

这个例子使用 font 属性设置了不同的字体大小和字体种类。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "bold 48px serif";
+ctx.strokeText("Hello world", 50, 100);
+
+ +

结果

+ + + +

{{EmbedLiveSample('Playable_code', 700, 360)}}

+ +

+ +

使用CSS字体加载API加载字体

+ +

借助{{domxref("FontFace")}} API的帮助，您可以在画布中使用字体之前显式加载字体。

+ +
let f = new FontFace('test', 'url(x)');
+
+f.load().then(function() {
+  // Ready to use the font in a canvas context
+});
+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.font")}}

+ +

Gecko-specific 注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.getImageData() 返回一个{{domxref("ImageData")}}对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh。

+ +

语法

+ +
ImageData ctx.getImageData(sx, sy, sw, sh);
+
+ +

参数

+ +
+
sx
+
将要被提取的图像数据矩形区域的左上角 x 坐标。
+
sy
+
将要被提取的图像数据矩形区域的左上角 y 坐标。
+
sw
+
将要被提取的图像数据矩形区域的宽度。
+
sh
+
将要被提取的图像数据矩形区域的高度。
+
+ +

返回值

+ +

一个{{domxref("ImageData")}} 对象，包含canvas给定的矩形图像数据。

+ +

错误抛出

+ +
+
IndexSizeError
+
如果高度或者宽度变量为0，则抛出错误。
+
+ +

示例

+ +

使用 getImageData 方法

+ +

这是一段使用 getImageData 方法的简单的代码片段。 获取更多信息，请看 canvas像素控制 和 {{domxref("ImageData")}} 对象。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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] }
+
+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.getImageData")}}

+ +

兼容性注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.getLineDash() 是 Canvas 2D API 获取当前线段样式的方法。

+ +

语法

+ +
ctx.getLineDash();
+
+ +

返回值

+ +

一个 {{jsxref("Array")}}数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组元素会被复制并重复。 例如， 设置线段为 [5, 15, 25] 将会得到以下返回值 [5, 15, 25, 5, 15, 25]。

+ +

示例

+ +

使用 getLineDash 方法

+ +

这是一段使用 getLineDash 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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();
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getlinedash", "CanvasRenderingContext2D.getLineDash")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.getLineDash")}}

+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.getTransform() 方法获取当前被应用到上下文的转换矩阵

+ +

语法

+ +
let storedTransform = ctx.getTransform();
+
+ +

参数

+ +

无.

+ +

返回值

+ +

一个 {{domxref("DOMMatrix")}} 对象

+ +

转换矩阵被这样描述： [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]

+ +
+

注意: 返回的对象不是实时的，所以更新它不会影响当前的转换矩阵，同时更新当前的转换矩阵不会影响已经返回的 DOMMatrix.

+
+ +

示例

+ +

在以下例子，我们有两个 {{htmlelement("canvas")}} 元素。我们使用  {{domxref("CanvasRenderingContext2D.setTransform()")}} 设置一个转换到第一个画布，并在上面画一个矩形，然后通过 getTransform() 获取矩阵。

+ +

然后我们将获取到的矩阵作为 DOMMatrix 参数传给 setTransform() 设置到第二个画布，并在上面画一个圆。

+ +

HTML

+ +
<canvas width="240"></canvas>
+<canvas width="240"></canvas>
+
+ +

CSS

+ +
canvas {
+  border: 1px solid black;
+}
+ +

JavaScript

+ +
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();
+ +

结果

+ +

{{ EmbedLiveSample('Examples', "100%", 180) }}

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-gettransform", "CanvasRenderingContext2D.getTransform")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.getTransform")}}

+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.globalAlpha 是 Canvas 2D API 用来描述在canvas上绘图之前，设置图形和图片透明度的属性。 数值的范围从 0.0 （完全透明）到1.0 （完全不透明）。

+ +

在 Canvas Tutorial 中参见 Applying styles and color 章节。

+ +

语法

+ +
ctx.globalAlpha = value;
+
+ +

选项

+ +
+
value
+
数字在 0.0  （完全透明）和 1.0 （完全不透明）之间。 默认值是 1.0。 如果数值不在范围内，包括{{jsxref("Infinity")}} 和{{jsxref("NaN")}} ，无法赋值，并且 globalAlpha 会保持原有的数值。
+
+ +

示例

+ +

使用 globalAlpha 属性

+ +

这是一段使用 globalAlpha 属性的简单代码片段，绘制了2个半透明的矩形。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看 canvas的变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 380) }}

+ +

globalAlpha 例子

+ +

此例中， 绘制了4个不同背景色的正方形。 在他们上面，绘制半透明的圆形。 将那个点绘制的所有图形的 globalAlpha 属性值都设置为0.2。通过 for 循环绘制半径逐渐增大的圆形。 最终形成的结果是放射性渐变。通过不停地叠加圆形， 使得先前绘制的圆形的透明度越来越暗。通过增加循环数量绘制更多的圆形，图片中心的背景将会变成完全不透明。

+ +
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();
+}
+
+ + + +

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Gecko-specific 注解

+ + + + + + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

Canvas 2D API的 CanvasRenderingContext2D.globalCompositeOperation  属性设置要在绘制新形状时应用的合成操作的类型，其中type是用于标识要使用的合成或混合模式操作的字符串。

+ +

在 Canvas Tutorial 中查看 Compositing 章节。

+ +

语法

+ +
ctx.globalCompositeOperation = type;
+ +

类型

+ +

{{EmbedLiveSample("合成示例", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

+ +

示例

+ +

使用 globalCompositeOperation 属性

+ +

这是一段使用 globalCompositeOperation 属性的简单的代码片段，绘制了2个矩形在重叠时相互排斥的情况。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 380) }}

+ +

规范描述

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}{{Spec2('HTML WHATWG')}}
{{SpecName('Compositing')}}{{Spec2('Compositing')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}

+ + + + + +

Gecko-specific 注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.imageSmoothingEnabled 是 Canvas 2D API 用来设置图片是否平滑的属性，true表示图片平滑（默认值），false表示图片不平滑。当我们获取 imageSmoothingEnabled 属性值时， 它会返回最新设置的值。

+ +

 以缩放画布为例，这个属性对像素为主的游戏很有用。默认的改变大小的算法会造成图片模糊并且破坏图片原有的像素。 如果那样的话，设置属性值为false。 参见 CSS {{cssxref("image-rendering")}} 属性。

+ +
+

注意:您可以使用{{domxref("CanvasRenderingContext2D.imageSmoothingQuality", "imageSmoothingQuality")}}属性来调整平滑质量。

+
+ +

语法

+ +
ctx.imageSmoothingEnabled = value;
+ +

选项

+ +
+
value
+
一个{{jsxref("Boolean")}} 类型的值，表示图片是否平滑。
+
+ +

示例

+ +

使用 imageSmoothingEnabled 属性

+ +

本示例比较了三个图像。 第一个图像以其自然大小绘制，第二个图像缩放为3倍并启用了图像平滑，而第三个图像缩放为3倍但禁用了图像平滑。

+ +

HTML

+ +
<canvas id="canvas" width="460" height="210"></canvas>
+ +

JavaScript

+ +
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);
+  ctx.imageSmoothingEnabled = true;
+  ctx.drawImage(img, w, 24, w * 3, h * 3);
+
+  ctx.fillText('Smoothing = FALSE', w * 5.5, 20);
+  ctx.imageSmoothingEnabled = false;
+  ctx.drawImage(img, w * 4, 24, w * 3, h * 3);
+};
+
+ + + +

结果

+ +

{{ EmbedLiveSample('Disabling_image_smoothing', 700, 240) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}

+ +
+ +

参见

+ + 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 +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

CanvasRenderingContext2D.imageSmoothingQuality 是 Canvas 2D API， 用于设置图像平滑度的属性。

+ +

语法

+ +
ctx.imageSmoothingQuality = value
+value = ctx.imageSmoothingQuality
+ +

选项

+ +
+
value
+
"low","medium","high"
+
+ +

示例

+ +

使用 imageSmoothingQuality 属性

+ +

这是一段简单的代码片段，对缩放的图片使用 imageSmoothingQuality 属性。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+};
+ +

编辑下面代码，在线查看 Canvas 的变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400) }}

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#imagesmoothingquality", "imageSmoothingQuality")}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(54.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(41)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatChrome(54.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(41)}}{{CompatUnknown}}{{CompatChrome(54.0)}}
+
+ +

参见

+ + 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 +--- +

{{APIRef}}

+ +

CanvasRenderingContext2D接口是Canvas API的一部分，可为{{HTMLElement("canvas")}}元素的绘图表面提供2D渲染上下文。 它用于绘制形状，文本，图像和其他对象。

+ +

请参阅侧边栏和下方的界面属性和方法。 Canvas教程提供了更多的信息，例子和资源。

+ +

基础示例

+ +

要获得CanvasRenderingContext2D 实例，您必须首先具有HTML <canvas>元素才能使用：

+ +
<canvas id="my-house" width="300" height="300"></canvas>
+
+ +

要获取画布的2D渲染上下文，请在<canvas>元素上调用{{domxref("HTMLCanvasElement.getContext()", "getContext()")}}，并提供'2d'作为参数：

+ +
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();
+
+ +

生成的图形如下所示:

+ + + +

{{EmbedLiveSample('Basic_example', 700, 330)}}

+ +

绘制矩形

+ +

以下是3个绘制矩形位图的方法。

+ +

{{domxref("CanvasRenderingContext2D.clearRect()")}}

+ +
+
设置指定矩形区域内（以 点 (x, y) 为起点，范围是(width, height) ）所有像素变成透明，并擦除之前绘制的所有内容。
+
{{domxref("CanvasRenderingContext2D.fillRect()")}}
+
绘制填充矩形，矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height 。
+
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
+
在 canvas 中，使用当前的笔触样式，描绘一个起点在 (x, y) 、宽度为 w 、高度为 h 的矩形。
+
+ +

绘制文本

+ +

下面是绘制文本的方法。 参见 {{domxref("TextMetrics")}} 对象获取文本属性。

+ +
+
{{domxref("CanvasRenderingContext2D.fillText()")}}
+
在(x,y)位置绘制（填充）文本。
+
{{domxref("CanvasRenderingContext2D.strokeText()")}}
+
在(x,y)位置绘制（描边）文本。
+
{{domxref("CanvasRenderingContext2D.measureText()")}}
+
返回 {{domxref("TextMetrics")}} 对象。
+
+ +

线型

+ +

下面的方法和属性控制如何绘制线。

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth")}}
+
线的宽度。默认 1.0
+
{{domxref("CanvasRenderingContext2D.lineCap")}}
+
线末端的类型。 允许的值： butt (默认), round, square.
+
{{domxref("CanvasRenderingContext2D.lineJoin")}}
+
定义两线相交拐点的类型。允许的值：round, bevel, miter(默认)。
+
{{domxref("CanvasRenderingContext2D.miterLimit")}}
+
斜接面限制比例。默认 10。
+
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
+
返回当前线段样式的数组，数组包含一组数量为偶数的非负数数字。
+
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
+
设置当前的线段样式。
+
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+
描述在哪里开始绘制线段。
+
+ +

文本样式

+ +

下面的属性控制如何设计文本。

+ +
+
{{domxref("CanvasRenderingContext2D.font")}}
+
字体设置。 默认值 10px sans-serif。
+
{{domxref("CanvasRenderingContext2D.textAlign")}}
+
文本对齐设置。 允许的值： start (默认), end, left, right 或 center.
+
{{domxref("CanvasRenderingContext2D.textBaseline")}}
+
基线对齐设置。 允许的值： top, hanging, middle, alphabetic (默认),ideographic, bottom.
+
{{domxref("CanvasRenderingContext2D.direction")}}
+
文本的方向。 允许的值： ltr, rtl, inherit (默认).
+
+ +

填充和描边样式

+ +

填充设计用于图形内部的颜色和样式，描边设计用于图形的边线。

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle")}}
+
图形内部的颜色和样式。 默认 #000 (黑色).
+
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
+
图形边线的颜色和样式。 默认 #000 (黑色).
+
+ +

渐变和图案

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+
创建一个沿着参数坐标指定的线的线性渐变。
+
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
+
创建一个沿着参数坐标指定的线的放射性性渐变。
+
{{domxref("CanvasRenderingContext2D.createPattern()")}}
+
使用指定的图片 (a {{domxref("CanvasImageSource")}})创建图案。通过 repetition 变量指定的方向上重复源图片。此方法返回 {{domxref("CanvasPattern")}}对象。
+
+ +

阴影

+ +
+
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
+
描述模糊效果。 默认 0
+
{{domxref("CanvasRenderingContext2D.shadowColor")}}
+
阴影的颜色。 默认fully-transparent black.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+
阴影水平方向的偏移量。 默认 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+
阴影垂直方向的偏移量。 默认 0.
+
+ +

路径

+ +

下面的方法用来操作对象的路径。

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath()")}}
+
清空子路径列表开始一个新的路径。当你想创建一个新的路径时，调用此方法。
+
{{domxref("CanvasRenderingContext2D.closePath()")}}
+
使笔点返回到当前子路径的起始点。它尝试从当前点到起始点绘制一条直线。如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。
+
{{domxref("CanvasRenderingContext2D.moveTo()")}}
+
将一个新的子路径的起始点移动到(x，y)坐标。
+
{{domxref("CanvasRenderingContext2D.lineTo()")}}
+
使用直线连接子路径的最后的点到x,y坐标。
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
+
添加一个3次贝赛尔曲线路径。该方法需要三个点。 第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 moveTo() 进行修改。
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
+
添加一个2次贝赛尔曲线路径。
+
{{domxref("CanvasRenderingContext2D.arc()")}}
+
绘制一段圆弧路径， 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。
+
{{domxref("CanvasRenderingContext2D.arcTo()")}}
+
根据控制点和半径绘制圆弧路径，使用当前的描点(前一个moveTo或lineTo等函数的止点)。根据当前描点与给定的控制点1连接的直线，和控制点1与控制点2连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径。
+
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
+
添加一个椭圆路径，椭圆的圆心在（x,y）位置，半径分别是radiusX 和 radiusY ，按照anticlockwise （默认顺时针）指定的方向，从 startAngle  开始绘制，到 endAngle 结束。
+
{{domxref("CanvasRenderingContext2D.rect()")}}
+
创建一个矩形路径，矩形的起点位置是 (x, y) ，尺寸为 width 和 height。
+
+ +

绘制路径

+ +
+
{{domxref("CanvasRenderingContext2D.fill()")}}
+
使用当前的样式填充子路径。
+
{{domxref("CanvasRenderingContext2D.stroke()")}}
+
使用当前的样式描边子路径。
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
+
如果给定的元素获取了焦点，那么此方法会在当前的路径绘制一个焦点。
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
+
将当前或给定的路径滚动到窗口。
+
{{domxref("CanvasRenderingContext2D.clip()")}}
+
从当前路径创建一个剪切路径。在  clip() 调用之后，绘制的所有信息只会出现在剪切路径内部。例如： 参见 Canvas教程中的 剪切路径 。
+
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
+
判断当前路径是否包含检测点。
+
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
+
判断检测点是否在路径的描边线上。
+
+ +

变换

+ +

在 CanvasRenderingContext2D 渲染背景中的对象会有一个当前的变换矩阵，一些方法可以对其进行控制。当创建当前的默认路径，绘制文本、图形和{{domxref("Path2D")}}对象的时候，会应用此变换矩阵。下面列出的方法保持历史和兼容性的原因，是为了{{domxref("SVGMatrix")}}对象现在能够应用于大部分 API ，将来会被替换。

+ +
+
{{domxref("CanvasRenderingContext2D.currentTransform")}}
+
当前的变换矩阵 ({{domxref("SVGMatrix")}} 对象)。
+
{{domxref("CanvasRenderingContext2D.rotate()")}}
+
在变换矩阵中增加旋转，角度变量表示一个顺时针旋转角度并且用弧度表示。
+
{{domxref("CanvasRenderingContext2D.scale()")}}
+
根据 x 水平方向和 y 垂直方向，为canvas 单位添加缩放变换。
+
{{domxref("CanvasRenderingContext2D.translate()")}}
+
通过在网格中移动 canvas 和 canvas 原点 x 水平方向、原点 y 垂直方向，添加平移变换
+
{{domxref("CanvasRenderingContext2D.transform()")}}
+
使用方法参数描述的矩阵多次叠加当前的变换矩阵。
+
{{domxref("CanvasRenderingContext2D.setTransform()")}}
+
重新设置当前的变换为单位矩阵，并使用同样的变量调用 transform() 方法。
+
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
+
使用单位矩阵重新设置当前的变换。
+
+ +

合成

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
+
在合成到 canvas 之前，设置图形和图像透明度的值。默认 1.0 (不透明)。
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
+
通过 globalAlpha 应用，设置如何在已经存在的位图上绘制图形和图像。
+
+ +

绘制图像

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage()")}}
+
绘制指定的图片。该方法有多种格式，提供了很大的使用灵活性。
+
+ +

像素控制

+ +

参见 {{domxref("ImageData")}} 对象。

+ +
+
{{domxref("CanvasRenderingContext2D.createImageData()")}}
+
使用指定的尺寸，创建一个新的、空白的 {{domxref("ImageData")}} 对象。所有的像素在新对象中都是透明的。
+
{{domxref("CanvasRenderingContext2D.getImageData()")}}
+
返回一个 {{domxref("ImageData")}} 对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh。
+
{{domxref("CanvasRenderingContext2D.putImageData()")}}
+
将数据从已有的 {{domxref("ImageData")}} 绘制到位图上。 如果提供了脏矩形，只能绘制矩形的像素。 
+
+ +

图像平滑

+ +
+
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
+
图像平滑的方式；如果禁用，缩放时，图像不会被平滑处理。
+
+ +

canvas 状态

+ +

CanvasRenderingContext2D渲染环境包含了多种绘图的样式状态（属性有线的样式、填充样式、阴影样式、文本样式）。下面的方法会帮助你使用这些状态：

+ +
+
{{domxref("CanvasRenderingContext2D.save()")}}
+
使用栈保存当前的绘画样式状态，你可以使用 restore() 恢复任何改变。
+
{{domxref("CanvasRenderingContext2D.restore()")}}
+
恢复到最近的绘制样式状态，此状态是通过 save() 保存到”状态栈“中最新的元素。
+
{{domxref("CanvasRenderingContext2D.canvas")}}
+
对 {{domxref("HTMLCanvasElement")}} 只读的反向引用。如果和 {{HTMLElement("canvas")}} 元素没有联系，可能为{{jsxref("null")}}。
+
+ +

点击区域

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
给 canvas 添加点击区域。
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
从 canvas 中删除指定 id  的点击区域。
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
从 canvas 中删除所有的点击区域。
+
+ +

不标准的 APIs

+ +

临时的和 WebKit 内核

+ +

很多 APIs  不赞成使用并且将来会被删除。

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.clearShadow()
+
删除所有的阴影设置，例如 {{domxref("CanvasRenderingContext2D.shadowColor")}} 和{{domxref("CanvasRenderingContext2D.shadowBlur")}}。
+
{{non-standard_inline}} CanvasRenderingContext2D.drawImageFromRect()
+
这是一个和 drawImage 相等的多余的方法。
+
{{non-standard_inline}} CanvasRenderingContext2D.setAlpha()
+
使用{{domxref("CanvasRenderingContext2D.globalAlpha")}} 替代。
+
{{non-standard_inline}} CanvasRenderingContext2D.setCompositeOperation()
+
使用{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} 替代。
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineWidth()
+
使用{{domxref("CanvasRenderingContext2D.lineWidth")}} 替代。
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineJoin()
+
使用{{domxref("CanvasRenderingContext2D.lineJoin")}} 替代。
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineCap()
+
使用{{domxref("CanvasRenderingContext2D.lineCap")}}替代。
+
{{non-standard_inline}} CanvasRenderingContext2D.setMiterLimit()
+
使用{{domxref("CanvasRenderingContext2D.miterLimit")}} 替代。
+
{{non-standard_inline}} CanvasRenderingContext2D.setStrokeColor()
+
使用{{domxref("CanvasRenderingContext2D.strokeStyle")}} 替代。
+
{{non-standard_inline}} CanvasRenderingContext2D.setFillColor()
+
使用{{domxref("CanvasRenderingContext2D.fillStyle")}}替代。
+
{{non-standard_inline}} CanvasRenderingContext2D.setShadow()
+
私用{{domxref("CanvasRenderingContext2D.shadowColor")}} 和{{domxref("CanvasRenderingContext2D.shadowBlur")}} 替代。
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDash
+
使用{{domxref("CanvasRenderingContext2D.getLineDash()")}} 和{{domxref("CanvasRenderingContext2D.setLineDash()")}}替代。
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDashOffset
+
使用{{domxref("CanvasRenderingContext2D.lineDashOffset")}}替代。
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
+
使用{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} 替代。
+
+ +

仅是临时的

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.getContextAttributes()
+
受 WebGLRenderingContext 方法的启发，该方法会返回一个 Canvas2DContextAttributes 对象。在 canvas 中，这个对象包含属性”storage“，表示存储器的应用（默认”persistent“）；属性”alpha“，表示透明度的应用（默认 true）。
+
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
+
受 WebGLRenderingContext 方法的启发，如果 Canvas 上下文丢失了，会返回 true ，否则返回 false 。
+
+ +

WebKit 特有的

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
+
关于 canvas 元素可支持存储的大小。参见 High DPI Canvas。
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
+
原本打算支持存储 HD ，但是从 canvas 规范中删除了。
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
+
原本打算支持存储 HD ，但是从 canvas 规范中删除了。
+
+ +
+
+ +

Gecko 特有的

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
CSS 和 SVG 滤镜 作为 Canvas APIs。 可能在新版本的规范中会标准化。
+
+ +

有前缀的 APIs

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
+
设置或获取当前的变换矩阵， 参见{{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
+
设置或获取当前翻转的变换矩阵。  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozFillRule
+
应用的 填充规则 。 必须是 evenodd 或者 nonzero (默认)。
+
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
+
参见 {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDash
+
描述相互交替的线段和间距长度的数组 {{ gecko_minversion_inline("7.0") }}。 使用 {{domxref("CanvasRenderingContext2D.getLineDash()")}} 和 {{domxref("CanvasRenderingContext2D.setLineDash()")}} 替代。
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDashOffset
+
描述线段数组在线上从哪里开始。 {{ gecko_minversion_inline("7.0") }}。 使用 {{domxref("CanvasRenderingContext2D.lineDashOffset")}} 替代。
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
+
在 Gecko 1.9 中引入， 不赞成使用的 {{domxref("CanvasRenderingContext2D.font")}} 属性。
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
+
这个方法在 Gecko 1.9 中引入，从 Gecko 7.0. 开始删除。 使用 {{domxref("CanvasRenderingContext2D.strokeText()")}} 或者 {{domxref("CanvasRenderingContext2D.fillText()")}} 替代。
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
+
这个方法在 Gecko 1.9 中引入， 从 Gecko 7.0. 开始未实现。 使用 {{domxref("CanvasRenderingContext2D.measureText()")}} 替代。
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
+
这个方法在 Gecko 1.9 中引入，从 Gecko 7.0. 开始删除。
+
{{non-standard_inline}} {{obsolete_inline}}CanvasRenderingContext2D.mozTextAlongPath()
+
这个方法在 Gecko 1.9 中引入，从 Gecko 7.0. 开始删除。
+
+ +

内部的 APIs (chrome-context 特有的)

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}
+
在 canvas 内渲染一个 XUL 元素的区域。
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
+
在 canvas 内渲染一个窗口的区域。窗口可视区的内容被渲染，忽略窗口的剪切和滚动。
+
{{non-standard_inline}} CanvasRenderingContext2D.demote()
+
这个方法会引起当前的上下文使用后端的硬件加速作为软件的备选方案。所有的状态都会被保留。
+
+ +

IE 浏览器

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
+
应用的填充规则 。必须是 evenodd 或者 nonzero (默认)。
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#2dcontext", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D")}}

+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.isPointInPath()是 Canvas 2D API 用于判断在当前路径中是否包含检测点的方法。

+ +

语法

+ +
boolean ctx.isPointInPath(x, y);
+boolean ctx.isPointInPath(x, y, fillRule);
+
+boolean ctx.isPointInPath(path, x, y);
+boolean ctx.isPointInPath(path, x, y, fillRule);
+
+ +

参数

+ +
+
x
+
检测点的X坐标
+
y
+
检测点的Y坐标
+
fillRule
+
用来决定点在路径内还是在路径外的算法。
+ 允许的值： + +
+
path
+
{{domxref("Path2D")}}应用的路径。
+
+ +

返回值

+ +
+
{{jsxref("Boolean")}}
+
一个Boolean值，当检测点包含在当前或指定的路径内，返回 true；否则返回 false。
+
+ +

示例

+ +

使用 isPointInPath 方法

+ +

这是一段简单的代码片段，使用 isPointinPath 方法检查某点是否在当前的路径内。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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
+
+ +

修改下面的代码， 在线查看 canvas的变化并在你的 控制台 中观察日志信息：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ispointinpath", "CanvasRenderingContext2D.isPointInPath")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Path parameter{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(31) }}{{ CompatNo }}{{ CompatVersionUnknown() }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Path parameter{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile(31) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Compatibility 注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.isPointInStroke()是 Canvas 2D API 用于检测某点是否在路径的描边线上的方法。

+ +

语法

+ +
boolean ctx.isPointInStroke(x, y);
+boolean ctx.isPointInStroke(path, x, y);
+
+ +

参数

+ +
+
x
+
检测点的X坐标。
+
y
+
检测点的Y坐标。
+
path
+
{{domxref("Path2D")}} 路径。
+
+ +

返回值

+ +
+
{{jsxref("Boolean")}}
+
一个布尔值，当这个点在路径的描边线上，则返回true，否则返回false。
+
+ +

示例

+ +

使用isPointInStroke方法

+ +

这只是一个使用 isPointInStroke 方法的简单的代码片段，用于检测一个点是否在路径的描边线上。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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
+
+ +

修改线面的代码，在线查看 canvas 的变化，并在你的控制台查看日至信息：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ispointinstroke", "CanvasRenderingContext2D.isPointInStroke")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Path parameter{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(31) }}{{ CompatNo }}{{ CompatVersionUnknown() }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Path parameter{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile(31) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有3个可能的值，分别是：butt, round and square。默认值是 butt。

+ +

参见 Canvas Tutorial 中的 Applying styles and color 章节。

+ +

语法

+ +
ctx.lineCap = "butt";
+ctx.lineCap = "round";
+ctx.lineCap = "square";
+ +

选项

+ +
+
butt
+
线段末端以方形结束。
+
round
+
线段末端以圆形结束。
+
square
+
线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
+
+ +

示例

+ +

使用 lineCap 属性

+ +

这是一段简单的代码片段，使用 lineCap 属性绘制以圆形结尾的线段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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();
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

lineCap 例子

+ +

在这个例子中绘制了3条线段， 每条线段都设置了不同的 lineCap 属性值。通过2条导航线能够精确地看到3条已绘制线段之间的不同。 每条线段的顶端和末端都能在导航线上准确的反映出来。

+ +

左侧的线段使用了默认值 butt ， 和导航线是完全平齐的。 第二条线段使用了 round 选项，在线段末端增加了一个半径为线短宽度一半的半圆。右侧的线段使用了 square 选项，增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

+ +
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();
+}
+
+ + + +

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ + + + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.lineDashOffset 是 Canvas 2D API 设置虚线偏移量的属性，例如可以实现 “蚂蚁线“ 的效果。

+ +

语法

+ +
ctx.lineDashOffset = value;
+
+ +
+
value
+
偏移量是float精度的数字。 初始值为 0.0。
+
+ +

示例

+ +

使用 lineDashOffset 属性

+ +

这是一段简单的代码片段，使用 lineDashOffset 属性绘制虚线。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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();
+
+ +

修改下面的代码并在线查看 canvas 变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 380) }}

+ +

“蚂蚁线”

+ +

”蚂蚁线“效果是一种动画技巧，经常出现在计算机绘图程序的套索工具中。 它能帮助用户根据图片背景动态变化的边界来区分选择的边界。

+ + + +
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();
+ +

{{ EmbedLiveSample('Marching_ants', 700, 200) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linedashoffset", "CanvasRenderingContext2D.lineDashOffset")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineDashOffset")}}

+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.lineJoin 是 Canvas 2D API 用来设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。

+ +

参见 Canvas Tutorial 中的 Applying styles and color 章节。

+ +

语法

+ +
ctx.lineJoin = "bevel";
+ctx.lineJoin = "round";
+ctx.lineJoin = "miter";
+ +

选项

+ +

此属性有3个值： round, bevel and miter。默认值是 miter。注意：如果2个相连部分在同一方向，那么lineJoin不会产生任何效果，因为在那种情况下不会出现连接区域。

+ +

+ +
+
round
+
通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
+
bevel
+
在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
+
miter
+
通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}} 属性看到效果。
+
+ +

示例

+ +

使用 lineJoin 属性

+ +

这是一段使用 lineJoin 属性的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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();
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 380) }}

+ +

lineJoin 例子

+ +

下面的例子绘制了3条不同的路径，演示 lineJoin 属性3种不同的设置。

+ +
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();
+}
+
+ + + +

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ + + + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.lineTo() 是 Canvas 2D API 使用直线连接子路径的终点到x，y坐标的方法（并不会真正地绘制）。

+ +

语法

+ +
void ctx.lineTo(x, y);
+
+ +

参数

+ +
+
x
+
直线终点的 x 轴坐标。
+
y
+
直线终点的 y 轴坐标。
+
+ +

示例

+ +

使用 lineTo 方法

+ +

这是一段使用 lineTo 方法的简单的代码片段。 使用 {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} 绘制路径的起始点， 使用 {{domxref("CanvasRenderingContext.moveTo", "moveTo()")}}移动画笔， 使用 {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} 方法真正地画线。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(0,0);
+ctx.lineTo(100, 100);
+ctx.stroke();
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

The CanvasRenderingContext2D.lineWidth 是 Canvas 2D API 设置线段厚度的属性（即线段的宽度）。

+ +
+

Note：线可以通过{{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, 和{{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} 方法绘制。

+
+ +

语法

+ +
ctx.lineWidth = value;
+ +

选项

+ +
+
value
+
描述线段宽度的数字。 0、 负数、 {{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 会被忽略。
+
+ +

示例

+ +

改变线宽

+ +

此示例使用15个单位的线宽绘制直线和矩形。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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();
+
+ +

结果

+ +

{{ EmbedLiveSample('改变线宽', 700, 180) }}

+ +

更多示例

+ +

有关此属性的更多示例和说明，请参阅在“画布教程”中的使用样式和颜色。

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linewidth", "CanvasRenderingContext2D.lineWidth")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{Compat("api.CanvasRenderingContext2D.lineWidth")}}

+ + + + + +

Gecko-specific 注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.measureText() 方法返回一个关于被测量文本{{domxref("TextMetrics")}} 对象包含的信息（例如它的宽度）。

+ +

语法

+ +
ctx.measureText(text);
+ +

参数

+ +
+
text
+
需要测量的{{jsxref("String")}} 。
+
+ +

返回值

+ +

{{domxref("TextMetrics")}} 对象。

+ +

示例

+ +

给出 {{HTMLElement("canvas")}} 元素：

+ +
<canvas id="canvas"></canvas>
+
+ +

使用下面的代码，你能得到 {{domxref("TextMetrics")}} 对象：

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+var text = ctx.measureText("foo"); // TextMetrics object
+text.width; // 16;
+
+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{Compat("api.CanvasRenderingContext2D.measureText")}}

+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

The CanvasRenderingContext2D.miterLimit 是 Canvas 2D API 设置斜接面限制比例的属性。 当获取属性值时， 会返回当前的值（默认值是10.0 ）。当给属性赋值时， 0、负数、 {{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 都会被忽略；除此之外都会被赋予一个新值。

+ +

参见 Canvas Tutorial 中的 Applying styles and color 章节。

+ +

语法

+ +
ctx.miterLimit = value;
+ +

选项

+ +
+
value
+
斜接面限制比例的的数字。 0、负数、{{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 都会被忽略。
+
+ +

简释

+ +
ctx.lineJoin = "miter"  // "miter" >   "round" )   "bevel" ]
+ +

只有当 lineJoin 显示为 ">"  时，miterLimit 才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 " ] " 类型来显示

+ +

示例

+ +

使用 miterLimit 属性

+ +

查看 Canvas Tutorial 中的 Applying styles and color 章节，获取更多信息。

+ + + +

{{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")}}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-miterlimit", "CanvasRenderingContext2D.miterLimit")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ + + + + +

Gecko-specific 注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.moveTo() 是 Canvas 2D API 将一个新的子路径的起始点移动到(x，y)坐标的方法。

+ +

语法

+ +
void ctx.moveTo(x, y);
+
+ +

参数

+ +
+
x
+
点的 x 轴。
+
y
+
点的 y 轴。
+
+ +

示例

+ +

使用 moveTo 方法

+ +

这是一段使用 moveTo 方法的简单的代码片段，移动画笔到起始点绘制一条线。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(200, 50);
+ctx.stroke();
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.putImageData() 是 Canvas 2D API 将数据从已有的 {{domxref("ImageData")}} 对象绘制到位图的方法。 如果提供了一个绘制过的矩形，则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。

+ +

语法

+ +
void ctx.putImageData(imagedata, dx, dy);
+void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
+
+ +

参数

+ +

imageData

+ +

     {{domxref("ImageData")}} ，包含像素值的数组对象。

+ +
+
dx
+
源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）。
+
dy
+
源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）。
+
dirtyX {{optional_inline}}
+
在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（x 坐标）。
+
dirtyY {{optional_inline}}
+
在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（y 坐标）。
+
dirtyWidth {{optional_inline}}
+
在源图像数据中，矩形区域的宽度。默认是图像数据的宽度。
+
dirtyHeight {{optional_inline}}
+
在源图像数据中，矩形区域的高度。默认是图像数据的高度。
+
+ +

抛出错误

+ +
+
NotSupportedError
+
如果任何一个变量被设置成无穷大，则会抛出此错误。
+
InvalidStateError
+
如果过图像数据对象的数据被分离，会抛出此错误。
+
+ +

示例

+ +

理解putImageData

+ +

通过{{domxref("CanvasRenderingContext2D.fillRect()")}}方法实现，更好地理解putImageData的执行算法. 获取更多信息，参见 使用Canvas控制像素 和 {{domxref("ImageData")}} 对象。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+    }
+  }
+}
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-putimagedata", "CanvasRenderingContext2D.putImageData")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

兼容性注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.quadraticCurveTo() 是 Canvas 2D API 新增二次贝塞尔曲线路径的方法。它需要2个点。 第一个点是控制点，第二个点是终点。 起始点是当前路径最新的点，当创建二次贝赛尔曲线之前，可以使用 moveTo() 方法进行改变。

+ +

语法

+ +
void ctx.quadraticCurveTo(cpx, cpy, x, y);
+
+ +

参数

+ +
+
cpx
+
控制点的 x 轴坐标。
+
cpy
+
控制点的 y 轴坐标。
+
x
+
终点的 x 轴坐标。
+
y
+
终点的 y 轴坐标。
+
+ +

示例

+ +

quadraticCurveTo 如何工作

+ +

这是一段绘制二次贝赛尔曲线的简单的代码片段。 控制点是红色，起点和终点是蓝色。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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();
+ + + +

{{ EmbedLiveSample('Using_the_quadraticCurveTo_method', 315, 165) }}

+ +

简单的二次曲线

+ +

此示例使用quadraticCurveTo()绘制了简单的二次Bézier曲线。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

曲线从moveTo()指定的点开始: (20, 110)。 控制点位于(230, 150)。 曲线在(250, 20)处结束。

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 110);
+ctx.quadraticCurveTo(230, 150, 250, 20);
+ctx.stroke();
+
+ +

结果

+ + + +
+
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Trying_the_quadraticCurveTo_parameters', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.rect() 是 Canvas 2D API 创建矩形路径的方法，矩形的起点位置是 (x, y) ，尺寸为 width 和 height。矩形的4个点通过直线连接，子路径做为闭合的标记，所以你可以填充或者描边矩形。

+ +

语法

+ +
void ctx.rect(x, y, width, height);
+
+ +

参数

+ +
+
x
+
矩形起点的 x 轴坐标。
+
y
+
矩形起点的 y 轴坐标。
+
width
+
矩形的宽度。
+
height
+
矩形的高度。
+
+ +

示例

+ +

使用 rect 方法

+ +

这是一段简单的代码片段，使用 rect 方法创建一条路径。 实际上，在 canvas 中绘制矩形路径， 你可以使用 {{domxref("CanvasRenderingContext2D.fill", "fill()")}} 或者 {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} 方法。 参见 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 和{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}} 方法， 只需一步即可绘制。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参见

+ + 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 +--- +
{{APIRef}} {{obsolete_header}}
+ +

CanvasRenderingContext2D.removeHitRegion() 是 Canvas 2D API 删除canvas中已存在的碰撞区域的方法。

+ +

语法

+ +
void ctx.removeHitRegion(id);
+
+ +

参数

+ +
+
id
+
{{domxref("DOMString")}}字符串，描述将要被删除区域的 id。
+
+ +

示例

+ +

使用 removeHitRegion 方法

+ +

这是一段使用 removeHitRegion 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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");
+
+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-removehitregion", "CanvasRenderingContext2D.removeHitRegion")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop(30)}} [2]{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo }}{{ CompatNo }}{{CompatGeckoDesktop(30)}} [2]{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

兼容性注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

CanvasRenderingContext2D.resetTransform() 是 Canvas 2D API 使用单位矩阵重新设置当前变形的方法。

+ +

语法

+ +
void ctx.resetTransform();
+
+ +

示例

+ +

使用 resetTransform 方法

+ +

这是一段使用 resetTransform 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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();
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

综合设置

+ +

你可以使用 {{domxref("CanvasRenderingContext2D.setTransform()")}} 方法重新设置当前变形为单位矩阵，如下：

+ +
ctx.setTransform(1, 0, 0, 1, 0, 0);
+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-resettransform", "CanvasRenderingContext2D.resetTransform")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support31{{CompatGeckoDesktop(36)}}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo }}{{ CompatNo }}{{CompatGeckoMobile(36)}}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.restore() 是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态，将 canvas 恢复到最近的保存状态的方法。 如果没有保存状态，此方法不做任何改变。

+ +

语法

+ +
void ctx.restore();
+ +

更多关于 drawing state 的信息， 请看 {{domxref("CanvasRenderingContext2D.save()")}}。

+ +

示例

+ +

使用 restore 方法

+ +

这是一段简单的代码片段，使用 save() 方法保存默认的状态，使用 restore() 进行恢复。 所以，稍后你可以使用默认的状态绘制一个矩形。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-restore", "CanvasRenderingContext2D.restore")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.rotate() 是 Canvas 2D API 在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。

+ +

语法

+ +
void ctx.rotate(angle);
+
+ +

+ +

参数

+ +
+
angle
+
顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。
+
+ +

旋转中心点一直是 canvas 的起始点。 如果想改变中心点，我们可以通过 {{domxref("CanvasRenderingContext2D.translate", "translate()")}} 方法移动 canvas 。

+ +

示例

+ +

使用 rotate 方法

+ +

这是一段使用 rotate 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
规范状态注释
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基础支持{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
特性AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基础支持{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.save() 是 Canvas 2D API 通过将当前状态放入栈中，保存 canvas 全部状态的方法。

+ +

语法

+ +
void ctx.save();
+ +

绘制状态

+ +

保存到栈中的绘制状态有下面部分组成：

+ + + +

示例

+ +

使用 save 方法

+ +

这是一段简单的代码片段，使用 save 方法保存默认的状态，这样，稍后你就可以使用默认的设置绘制一个矩形。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.scale() 是 Canvas 2D API 根据 x 水平方向和 y 垂直方向，为canvas 单位添加缩放变换的方法。

+ +

默认的， 在 canvas 中一个单位实际上就是一个像素。例如，如果我们将0.5作为缩放因子，最终的单位会变成0.5像素，并且形状的尺寸会变成原来的一半。相似的方式，我们将2.0作为缩放因子，将会增大单位尺寸变成两个像素。形状的尺寸将会变成原来的两倍。

+ +

语法

+ +
void ctx.scale(x, y);
+
+ +

参数

+ +
+
x
+
水平方向的缩放因子。A negative value flips pixels across the vertical axis. A value of 1 results in no horizontal scaling.
+
y
+
垂直方向的缩放因子。A negative value flips pixels across the horizontal axis. A value of 1 results in no vertical scaling.
+
+ +

示例

+ +

使用 scale 方法

+ +

这是一段使用 scale 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

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.

+ +

Notice that its position on the canvas also changes. Since its specified corner is (10, 10), its rendered corner becomes (90, 30).

+ +
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);
+ +

结果

+ +

The scaled rectangle is red, and the non-scaled rectangle is gray.

+ +

{{ EmbedLiveSample('Scaling_a_shape', 700, 180) }}

+ +

使用 scale 水平或竖直翻转

+ +

你可以使用 ctx.scale(-1, 1) 水平翻转上下文，使用 ctx.scale(1, -1) 垂直翻转上下文。在这个例子中，"Hello world!" 被水平翻转。

+ +

Note that the call to {{domxref("CanvasRenderingContext2D.fillText()", "fillText()")}} specifies a negative x coordinate. This is to adjust for the negative scaling factor: -280 * -1 becomes 280, and text is drawn leftwards from that point.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

Result

+ +

{{ EmbedLiveSample('Flipping_things_horizontally_or_vertically', 700, 180) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.scale")}}

+ +

参见

+ + + +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

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 +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

CanvasRenderingContext2D.scrollPathIntoView() 是 Canvas 2D API 将当前或给定的路径滚动到窗口的方法。类似于 {{domxref("Element.scrollIntoView()")}}。

+ +

语法

+ +
void ctx.scrollPathIntoView();
+void ctx.scrollPathIntoView(path);
+
+ +

参数

+ +
+
path
+
使用的{{domxref("Path2D")}} 路径。
+
+ +

示例

+ +

使用 scrollPathIntoView 方法

+ +

这是一段使用 scrollPathIntoView 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.fillRect(10, 10, 30, 30);
+ctx.scrollPathIntoView();
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scrollpathintoview", "CanvasRenderingContext2D.scrollPathIntoView")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}[1]{{CompatNo}}
+ {{bug(1120401)}}		{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
+ {{bug(1120401)}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

兼容性注解

+ + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

Canvas 2D API的{{domxref("CanvasRenderingContext2D")}}接口的setLineDash()方法在填充线时使用虚线模式。 它使用一组值来指定描述模式的线和间隙的交替长度。

+ +
+

提示：如果要切换回至实线模式，将 dash list 设置为一个空数组即可。

+
+ +

语法

+ +
void ctx.setLineDash(segments);
+
+ +

参数

+ +
+
segments
+
一个{{jsxref("Array")}}数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。
+
+

返回值

+
+
{{jsxref("undefined")}}
+
+ +

示例

+ +

基本示例

+ +

这是一段简单的代码片段，使用 setLineDash 方法绘制一条线段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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();
+
+ +

结果

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('基本示例', 700, 360) }}

+ +

一些常见的模式

+ +

此示例说明了各种常见的线划线模式。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +

下面创建的drawDashedLine() 函数使得多个虚线的绘制变得简单。它接收模式数组作为其唯一参数。

+ +
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]
+ +

Result

+ +

{{ EmbedLiveSample('一些常见的模式', 700, 180) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.setLineDash")}}

+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.setTransform() 是 Canvas 2D API 使用单位矩阵重新设置（覆盖）当前的变换并调用变换的方法，此变换由方法的变量进行描述。

+ +

参见 {{domxref("CanvasRenderingContext2D.transform()", "transform()")}} 方法，这个方法不会覆盖当前的变换矩阵，会多次叠加变换。

+ +

语法

+ +
void ctx.setTransform(a, b, c, d, e, f);
+
+ +

变换矩阵的描述： [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]

+ +

参数

+ +
+
a (m11)
+
水平缩放。
+
b (m12)
+
垂直倾斜。
+
c (m21)
+
水平倾斜。
+
d (m22)
+
垂直缩放。
+
e (dx)
+
水平移动。
+
f (dy)
+
垂直移动。
+
+ +

较新的类型由单个参数矩阵组成，该参数表示要设置的2D转换矩阵（从技术上讲，是DOMMatrixInit对象；任何对象只要包含上述作为属性的组件，就可以执行操作）。

+ +

示例

+ +

使用 setTransform 方法

+ +

这是一段使用 setTransform 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.setTransform(1,1,0,1,0,0);
+ctx.fillRect(0,0,100,100);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.setTransform")}}

+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.shadowBlur 是 Canvas 2D API 描述模糊效果程度的属性； 它既不对应像素值也不受当前转换矩阵的影响。 默认值是 0。

+ +

语法

+ +
ctx.shadowBlur = level;
+
+ +
+
level
+
描述模糊效果程度的，float 类型的值。默认值是 0。 负数、 {{jsxref("Infinity")}} 或者 {{jsxref("NaN")}} 都会被忽略。
+
+ +

示例

+ +

使用 shadowBlur 属性

+ +

这是一段简单的代码片段，使用 shadowblur 属性设置模糊阴影。 注意：只有设置shadowColor属性值为不透明，阴影才会被绘制。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-shadowblur", "CanvasRenderingContext2D.shadowBlur")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ + + + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.shadowColor 是 Canvas 2D API 描述阴影颜色的属性。

+ +

语法

+ +
ctx.shadowColor = color;
+
+ +
+
color
+
可以转换成 CSS {{cssxref("<color>")}} 值的{{domxref("DOMString")}} 字符串。 默认值是 fully-transparent black.
+
+ +

示例

+ +

使用 shadowColor 属性

+ +

这是一段简单的代码片段，使用 shadowColor 属性设置阴影的颜色。 注意：shadowColor属性设置成不透明的，并且 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、 {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}} 或者 {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} 属性不为0，阴影才会被绘制。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-shadowcolor", "CanvasRenderingContext2D.shadowColor")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ + + + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.shadowOffsetX 是 Canvas 2D API 描述阴影水平偏移距离的属性。

+ +

Syntax

+ +
ctx.shadowOffsetX = offset;
+
+ +
+
offset
+
阴影水平偏移距离的float类型的值。默认值是 0。  {{jsxref("Infinity")}} 或者{{jsxref("NaN")}}都会被忽略。
+
+ +

示例

+ +

使用 shadowOffsetX 属性

+ +

这是一段简单的代码片段，使用 shadowOffsetX 属性设置阴影的水平偏移量。注意：将shadowColor属性设置成不透明，阴影才会被绘制。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-shadowoffsetx", "CanvasRenderingContext2D.shadowOffsetX")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.shadowOffsetY 是 Canvas 2D API 描述阴影垂直偏移距离的属性。

+ +

语法

+ +
ctx.shadowOffsetY = offset;
+
+ +
+
offset
+
阴影垂直偏移距离的float类型的值。 默认值是 0。  {{jsxref("Infinity")}} 或者{{jsxref("NaN")}} 都会被忽略。
+
+ +

示例

+ +

使用 shadowOffsetY 属性

+ +

这是一段简单的代码片段，使用 shadowOffsetY 属性绘制阴影垂直偏移量。注意：将shadowColor属性设置成不透明，阴影才会被绘制。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-shadowoffsety", "CanvasRenderingContext2D.shadowOffsetY")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.stroke() 是 Canvas 2D API 使用非零环绕规则，根据当前的画线样式，绘制当前或已经存在的路径的方法。

+ +

语法

+ +
void ctx.stroke();
+void ctx.stroke(path);
+
+ +

Parameters

+ +
+
path
+
绘制的路径{{domxref("Path2D")}} 。
+
+ +

示例

+ +

使用 stroke 方法

+ +

这是一段简单的代码片段，使用 stroke 方法绘制一条路径。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Path parameter{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(31) }}{{ CompatNo }}{{ CompatVersionUnknown() }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Path parameter{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile(31) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.strokeRect() 是 Canvas 2D API 在 canvas 中，使用当前的绘画样式，描绘一个起点在 (x, y) 、宽度为 w 、高度为 h 的矩形的方法。

+ +

此方法直接绘制到画布而不修改当前路径，因此任何后续{{domxref("CanvasRenderingContext2D.fill()", "fill()")}} 或{{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}调用对它没有影响。

+ +

语法

+ +
void ctx.strokeRect(x, y, width, height);
+
+ +

strokeRect()方法绘制一个描边矩形，其起点为(x, y) ，其大小由宽度和高度指定。

+ +

参数

+ +
+
x
+
矩形起点的 x 轴坐标。
+
y
+
矩形起点的 y 轴坐标。
+
width
+
矩形的宽度。正值在右侧，负值在左侧。
+
height
+
矩形的高度。正值在下，负值在上。
+
+ +

示例

+ +

一个简单的填充矩形

+ +

这是一段使用 strokeRect 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

矩形的左上角是（20,10）。它的宽度为160，高度为100。

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+ctx.strokeStyle = 'green';
+ctx.strokeRect(20, 10, 160, 100);
+ +

结果

+ +

{{ EmbedLiveSample('一个简单的填充矩形', 700, 180) }}

+ +

应用多种上下文设置

+ +

此示例绘制一个带有阴影和粗斜面轮廓的矩形。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
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);
+ +

结果

+ +

{{ EmbedLiveSample('应用多种上下文设置', 700, 180) }}

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{Compat("api.CanvasRenderingContext2D.strokeRect")}}

+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.strokeStyle 是 Canvas 2D API 描述画笔（绘制图形）颜色或者样式的属性。默认值是 #000 (black)。

+ +

参见 Canvas Tutorial 中的 Applying styles and color 章节。

+ +

语法

+ +
ctx.strokeStyle = color;
+ctx.strokeStyle = gradient;
+ctx.strokeStyle = pattern;
+
+ +

选项

+ +
+
color
+
{{domxref("DOMString")}} 字符串，可以转换成 CSS {{cssxref("<color>")}} 值。
+
gradient
+
{{domxref("CanvasGradient")}} 对象（线性渐变或放射性渐变）。
+
pattern
+
{{domxref("CanvasPattern")}} 对象（可重复的图片）。
+
+ +

示例

+ +

使用 strokeStyle 属性设置不同的颜色

+ +

这是一段简单的代码片段，使用 strokeStyle 属性设置不同的颜色。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.strokeStyle = "blue";
+ctx.strokeRect(10, 10, 100, 100);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

strokeStyle 例子

+ +

这个例子使用 strokeStyle 属性改变图形轮廓线的颜色。我们使用 {{domxref("CanvasRenderingContext2D.arc", "arc()")}} 绘制圆形来代替正方形。

+ +
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();
+  }
+}
+
+ + + +

结果如下显示：

+ +

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}

+ +
+ + + + + +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.strokeText() 是 Canvas 2D API 在给定的 (x, y) 位置绘制文本的方法。如果提供了表示最大值的第四个参数，文本将会缩放适应宽度。

+ +

参见 {{domxref("CanvasRenderingContext2D.fillText()")}} 方法填充文本。

+ +

语法

+ +
void ctx.strokeText(text, x, y [, maxWidth]);
+
+ +

参数

+ +
+
text
+
使用当前 {{domxref("CanvasRenderingContext2D.font","font")}}，{{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}，{{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}和{{domxref("CanvasRenderingContext2D.direction","direction")}} 的值对文本进行渲染。
+
+ +
+
x
+
文本起始点的 x 轴坐标。
+
y
+
文本起始点的 y 轴坐标。
+
maxWidth {{optional_inline}}
+
需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体（如果通过水平缩放当前的字体，可以进行有效的或者合理可读的处理）或者小号的字体。
+
+ +

示例

+ +

使用 strokeText 方法

+ +

这是一个使用 strokeText 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE(9) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.textAlign 是 Canvas 2D API 描述绘制文本时，文本的对齐方式的属性。注意，该对齐是基于CanvasRenderingContext2D.fillText方法的x的值。所以如果textAlign="center"，那么该文本将画在 x-50%*width。

+ +
+

译者注：这里的textAlign="center"比较特殊。textAlign的值为center时候文本的居中是基于你在fillText的时候所给的x的值，也就是说文本一半在x的左边，一半在x的右边（可以理解为计算x的位置时从默认文字的左端，改为文字的中心，因此你只需要考虑x的位置即可）。所以，如果你想让文本在整个canvas居中，就需要将fillText的x值设置成canvas的宽度的一半。

+
+ +

语法

+ +
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
+
+ +

选项

+ +

有效值：

+ +
+
left
+
文本左对齐。
+
right
+
文本右对齐。
+
center
+
文本居中对齐。
+
start
+
文本对齐界线开始的地方 （左对齐指本地从左向右，右对齐指本地从右向左）。
+
end
+
文本对齐界线结束的地方 （左对齐指本地从左向右，右对齐指本地从右向左）。
+
+ +

默认值是 start。

+ +
+

译者注：direction属性会对此属性产生影响。如果direction属性设置为ltr，则left和start的效果相同，right和end的效果相同；如果direction属性设置为rtl，则left和end的效果相同，right和start的效果相同。

+
+ +

示例

+ +

使用 textAlign 属性

+ +

这是一段简单的代码片段，使用 textAlign 属性设置文本的不同对齐方式。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.textAlign = "left";
+ctx.strokeText("Hello world", 0, 100);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE(9) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.textBaseline 是 Canvas 2D API 描述绘制文本时，当前文本基线的属性。

+ +
+

译者注：决定文字垂直方向的对齐方式。

+
+ +

语法

+ +
ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
+
+ +

选项

+ +

有效值：

+ +
+
top
+
文本基线在文本块的顶部。
+
hanging
+
文本基线是悬挂基线。
+
middle
+
文本基线在文本块的中间。
+
alphabetic
+
文本基线是标准的字母基线。
+
ideographic
+
文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
+
bottom
+
文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
+
+ +

默认值是 alphabetic。

+ +

示例

+ +

使用 textBaseline 属性

+ +

这是一段简单的代码片段，使用 textBaseline 属性设置不同的文本基线。

+ +

HTML

+ +
<canvas id="canvas" width="550" height="500"></canvas>
+ +

JavaScript

+ +
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);
+});
+ + + + + +

结果

+ +

{{ EmbedLiveSample('Playable_code', 700, 550) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.textBaseline")}}

+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.transform() 是 Canvas 2D API 使用矩阵多次叠加当前变换的方法，矩阵由方法的参数进行描述。你可以缩放、旋转、移动和倾斜上下文。

+ +

参见 {{domxref("CanvasRenderingContext2D.setTransform()", "setTransform()")}} 方法，这个方法使用单位矩阵重新设置当前的变换并且会调用 transform()。

+ +

语法

+ +
void ctx.transform(a, b, c, d, e, f);
+
+ +

变换矩阵的描述： [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]

+ +

参数

+ +
+
a (m11)
+
水平缩放。
+
b (m12)
+
垂直倾斜。
+
c (m21)
+
水平倾斜。
+
d (m22)
+
垂直缩放。
+
e (dx)
+
水平移动。
+
f (dy)
+
垂直移动。
+
+ +

示例

+ +

使用 transform 方法

+ +

这是一段使用 transform 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.transform(1,1,0,1,0,0);
+ctx.fillRect(0,0,100,100);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +

Canvas 2D API的CanvasRenderingContext2D.translate() 方法对当前网格添加平移变换的方法。

+ +

语法

+ +
void ctx.translate(x, y);
+
+ +

translate() 方法, 将 canvas 按原始 x点的水平方向、原始的 y点垂直方向进行平移变换

+ +

+ +

参数

+ +
+
x
+
水平方向的移动距离。
+
y
+
垂直方向的移动距离。
+
+ +

示例

+ +

使用 translate 方法

+ +

这是一段使用 translate 方法的简单的代码片段。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
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);
+
+ +

修改下面的代码并在线查看 canvas 的变化：

+ +
+
Playable code
+ +
<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>
+
+ +
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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

参见

+ + -- cgit v1.2.3-54-g00ecf