zh-cn: Format /web/api using Prettier (part 2)

files/zh-cn/web/api/canvasgradient/addcolorstop/index.md

@@ -29,7 +29,7 @@ void gradient.addColorStop(offset, color);
 #### HTML
 
 ```html
- <canvas id="canvas"></canvas>
+<canvas id="canvas"></canvas>
 ```
 
 #### JavaScript
@@ -38,11 +38,11 @@ void gradient.addColorStop(offset, color);
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
-var gradient = ctx.createLinearGradient(0,0,200,0);
-gradient.addColorStop(0,"green");
-gradient.addColorStop(1,"white");
+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);
+ctx.fillRect(10, 10, 200, 100);
 ```
 
 编辑以下代码可看到画布变化：
@@ -58,7 +58,8 @@ 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>
+ctx.fillRect(10,10,200,100);</textarea
+>
 ```
 
 ```js hidden
@@ -74,14 +75,14 @@ function drawCanvas() {
   eval(textarea.value);
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawCanvas();
 });
 
-edit.addEventListener("click", function() {
+edit.addEventListener("click", function () {
   textarea.focus();
-})
+});
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);

files/zh-cn/web/api/canvaspattern/settransform/index.md

@@ -27,8 +27,7 @@ setTransform(matrix)
 #### HTML
 
 ```html
-<canvas id="canvas"></canvas>
-<svg id="svg1"></svg>
+<canvas id="canvas"></canvas> <svg id="svg1"></svg>
 ```
 
 #### JavaScript
@@ -41,13 +40,13 @@ var svg1 = document.getElementById("svg1");
 var matrix = svg1.createSVGMatrix();
 
 var img = new Image();
-img.src = 'canvas_createpattern.png';
+img.src = "canvas_createpattern.png";
 
-img.onload = function() {
-  var pattern = ctx.createPattern(img, 'repeat');
+img.onload = function () {
+  var pattern = ctx.createPattern(img, "repeat");
   pattern.setTransform(matrix.rotate(-45).scale(1.5));
   ctx.fillStyle = pattern;
-  ctx.fillRect(0,0,400,400);
+  ctx.fillRect(0, 0, 400, 400);
 };
 ```
 
@@ -68,7 +67,8 @@ img.onload = function() {
   pattern.setTransform(matrix.rotate(-45).scale(1.5));
   ctx.fillStyle = pattern;
   ctx.fillRect(0,0,400,400);
-};</textarea>
+};</textarea
+>
 ```
 
 ```js hidden
@@ -87,14 +87,14 @@ function drawCanvas() {
   eval(textarea.value);
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawCanvas();
 });
 
-edit.addEventListener("click", function() {
+edit.addEventListener("click", function () {
   textarea.focus();
-})
+});
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);

files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.md

@@ -43,8 +43,8 @@ void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
 #### JavaScript
 
 ```js
-const canvas = document.querySelector('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.querySelector("canvas");
+const ctx = canvas.getContext("2d");
 
 ctx.beginPath();
 ctx.arc(100, 75, 50, 0, 2 * Math.PI);
@@ -64,23 +64,23 @@ ctx.stroke();
 ```
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
 
 // Draw shapes
-for (i=0;i<4;i++){
-  for(j=0;j<3;j++){
+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
+    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);
+    ctx.arc(x, y, radius, startAngle, endAngle, clockwise);
 
-    if (i>1){
+    if (i > 1) {
       ctx.fill();
     } else {
       ctx.stroke();

files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.md

@@ -44,29 +44,29 @@ void ctx.arcTo(x1, y1, x2, y2, radius);
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
-ctx.setLineDash([])
+ctx.setLineDash([]);
 ctx.beginPath();
 ctx.moveTo(150, 20);
-ctx.arcTo(150,100,50,20,30);
+ctx.arcTo(150, 100, 50, 20, 30);
 ctx.stroke();
 
-ctx.fillStyle = 'blue';
+ctx.fillStyle = "blue";
 // base point
 ctx.fillRect(150, 20, 10, 10);
 
-ctx.fillStyle = 'red';
+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.setLineDash([5, 5]);
 ctx.moveTo(150, 20);
-ctx.lineTo(150,100);
+ctx.lineTo(150, 100);
 ctx.lineTo(50, 20);
 ctx.stroke();
 ctx.beginPath();
-ctx.arc(120,38,30,0,2*Math.PI);
+ctx.arc(120, 38, 30, 0, 2 * Math.PI);
 ctx.stroke();
 ```
 
@@ -106,7 +106,8 @@ ctx.lineTo(50, 20);
 ctx.stroke();
 ctx.beginPath();
 ctx.arc(120,38,30,0,2*Math.PI);
-ctx.stroke();</textarea>
+ctx.stroke();</textarea
+>
 ```
 
 ```js hidden
@@ -122,14 +123,14 @@ function drawCanvas() {
   eval(textarea.value);
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawCanvas();
 });
 
-edit.addEventListener("click", function() {
+edit.addEventListener("click", function () {
   textarea.focus();
-})
+});
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);

files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.md

@@ -28,19 +28,19 @@ void ctx.beginPath();
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // First path
 ctx.beginPath();
-ctx.strokeStyle = 'blue';
+ctx.strokeStyle = "blue";
 ctx.moveTo(20, 20);
 ctx.lineTo(200, 20);
 ctx.stroke();
 
 // Second path
 ctx.beginPath();
-ctx.strokeStyle = 'green';
+ctx.strokeStyle = "green";
 ctx.moveTo(20, 20);
 ctx.lineTo(120, 120);
 ctx.stroke();

files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.md

@@ -47,17 +47,17 @@ var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.beginPath();
-ctx.moveTo(50,20);
+ctx.moveTo(50, 20);
 ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
 ctx.stroke();
 
-ctx.fillStyle = 'blue';
+ctx.fillStyle = "blue";
 // start point
 ctx.fillRect(50, 20, 10, 10);
 // end point
 ctx.fillRect(50, 100, 10, 10);
 
-ctx.fillStyle = 'red';
+ctx.fillStyle = "red";
 // control point one
 ctx.fillRect(230, 30, 10, 10);
 // control point two
@@ -79,7 +79,8 @@ ctx.fillRect(150, 70, 10, 10);
 <textarea id="code" class="playable-code">
 ctx.beginPath();
 ctx.bezierCurveTo(50, 100, 180, 10, 20, 10);
-ctx.stroke();</textarea>
+ctx.stroke();</textarea
+>
 ```
 
 ```js hidden
@@ -95,14 +96,14 @@ function drawCanvas() {
   eval(textarea.value);
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawCanvas();
 });
 
-edit.addEventListener("click", function() {
+edit.addEventListener("click", function () {
   textarea.focus();
-})
+});
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);

files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.md

@@ -26,7 +26,7 @@ ctx.canvas;
 ```js
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
-ctx.canvas // HTMLCanvasElement
+ctx.canvas; // HTMLCanvasElement
 ```
 
 ## 规范描述

files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md

@@ -35,8 +35,8 @@ void ctx.clearRect(x, y, width, height);
 这段代码清除整个画布。这段代码通常在动画的每一帧开始被执行。清除的范围涵覆盖了整个 {{HtmlElement("canvas")}} 元素。
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 ```
 
@@ -60,12 +60,12 @@ var ctx = canvas.getContext("2d");
 
 // 绘制黄色背景
 ctx.beginPath();
-ctx.fillStyle = '#ff6';
+ctx.fillStyle = "#ff6";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 
 // 绘制蓝色三角形
 ctx.beginPath();
-ctx.fillStyle = 'blue';
+ctx.fillStyle = "blue";
 ctx.moveTo(20, 20);
 ctx.lineTo(180, 20);
 ctx.lineTo(130, 130);

files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md

@@ -47,18 +47,18 @@ void ctx.clip(path, fillRule);
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // Create circular clipping region
 ctx.beginPath();
 ctx.arc(100, 75, 50, 0, Math.PI * 2);
 ctx.clip();
 
 // Draw stuff that gets clipped
-ctx.fillStyle = 'blue';
+ctx.fillStyle = "blue";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
-ctx.fillStyle = 'orange';
+ctx.fillStyle = "orange";
 ctx.fillRect(0, 0, 100, 100);
 ```
 

files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.md

@@ -28,14 +28,14 @@ void ctx.closePath();
 #### JavaScript
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 ctx.beginPath();
-ctx.moveTo(20, 140);   // Move pen to bottom-left corner
-ctx.lineTo(120, 10);   // Line to top corner
-ctx.lineTo(220, 140);  // Line to bottom-right corner
-ctx.closePath();       // Line to bottom-left corner
+ctx.moveTo(20, 140); // Move pen to bottom-left corner
+ctx.lineTo(120, 10); // Line to top corner
+ctx.lineTo(220, 140); // Line to bottom-right corner
+ctx.closePath(); // Line to bottom-left corner
 ctx.stroke();
 ```
 

files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.md

@@ -63,7 +63,8 @@ const ctx = canvas.getContext("2d");
 
 const img = new Image();
 img.src = "canvas_createpattern.png";
-img.onload = () => { // Only use the image after it's loaded
+img.onload = () => {
+  // Only use the image after it's loaded
   const pattern = ctx.createPattern(img, "repeat");
   ctx.fillStyle = pattern;
   ctx.fillRect(0, 0, 300, 300);