canvas学习总结

悠悠 2023-06-08 03:24 11阅读 0赞

`<canvas>`

1.  是HTML5新增的
2.  与JavaScript一起使用绘制图像(canvas本身没有什么绘制能力，需结合脚本绘图)
3.  可以用来制作照片集或者简单的动画
4.  还可以实时视频处理和渲染

`<canvas width=“300” height=“150”></canvas>`可选属性：

1.  width
2.  height  
    单位：px

#### 浏览器支持 ####

Internet Explorer 9、Firefox、Opera、Chrome 、Safari  
⚠️IE8以及更早版本浏览器不支持canvas

##### `getContext()` #####

该方法会返回一个对象，这个对象提供了在画布上使用的方法和属性

<canvas id="mycanvas" width="300" height="150"></canvas>
    
    const myCanvas = document.getElementById("mycanvas");
    const ctx = myCanvas.getContext("2d");

#### 对象（上述ctx）的属性和方法 ####

####  颜色样式和阴影属性与方法: ####

1.  `fillStyle`  
    设置或返回填充绘画的颜色、渐变、或者模式。  
    `ctx.fillStyle=color|gradient|pattern;`

<table> 
 <thead> 
  <tr> 
   <th>fillStyle的值</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td>绘图的填充色</td> 
  </tr> 
  <tr> 
   <td>gradient</td> 
   <td>绘图填充渐变对象（线性 or 放射性）</td> 
  </tr> 
  <tr> 
   <td>pattern</td> 
   <td>用于创建填充绘图的pattern对象</td> 
  </tr> 
 </tbody> 
</table>

1.  `strokeStyle`  
    设置或返回用于笔触的颜色、渐变或模式

<table> 
 <thead> 
  <tr> 
   <th>strokeStyle的值</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td>绘图笔触颜色</td> 
  </tr> 
  <tr> 
   <td>gradient</td> 
   <td>绘图填充渐变对象（线性 or 放射性）</td> 
  </tr> 
  <tr> 
   <td>pattern</td> 
   <td>用于创建 pattern 笔触的 pattern 对象</td> 
  </tr> 
 </tbody> 
</table>

1.  `shadowColor`  
    设置或返回用于阴影的颜色  
    ⚠️shadowColor与shadowBlur同时使用

<table> 
 <thead> 
  <tr> 
   <th>shadowColor的值</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td>阴影颜色</td> 
  </tr> 
 </tbody> 
</table>

1.  `shadowBlur`  
    设置或返回阴影的模糊级别

<table> 
 <thead> 
  <tr> 
   <th>shadowBlur的值</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>number</td> 
   <td>阴影的模糊级数</td> 
  </tr> 
 </tbody> 
</table>

1.  `shadowOffsetX`  
    设置或返回阴影距离图形的水平距离
2.  `shadowOffsetY`  
    设置或i返回阴影距离图形的垂直距离

<table> 
 <thead> 
  <tr> 
   <th>shadowOffsetX 或 shadowOffsetY的值</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>number</td> 
   <td>距离</td> 
  </tr> 
 </tbody> 
</table>

1.  `createLinearGradient()`  
    该方法创建线性的渐变对象

⚠️使用该对象作为 strokeStyle 或 fillStyle 属性的值。

⚠️使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何  
处定位颜色。

<table> 
 <thead> 
  <tr> 
   <th><code>createLinearGradient()</code>参数</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x0</td> 
   <td>渐变开始点x坐标</td> 
  </tr> 
  <tr> 
   <td>y0</td> 
   <td>渐变开始点y坐标</td> 
  </tr> 
  <tr> 
   <td>x1</td> 
   <td>渐变结束点x坐标</td> 
  </tr> 
  <tr> 
   <td>y1</td> 
   <td>渐变结束点y坐标</td> 
  </tr> 
 </tbody> 
</table>

`ctx.createLinearGradient(x0,y0,x1,y1);`

示例：  
定义一个从黑到红再到白的渐变，作为矩形的填充样式：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var my_gradient=ctx.createLinearGradient(0,0,170,0);
    my_gradient.addColorStop(0,"black");
    my_gradient.addColorStop(0.5,"red");
    my_gradient.addColorStop(1,"white");
    ctx.fillStyle=my_gradient;
    ctx.fillRect(20,20,150,100);

1.  `createPattern()`  
    在指定方向重复指定的元素  
    ⚠️元素可以是图片、视频，或者其他 元素。  
    ⚠️被重复的元素可用于绘制/填充矩形、圆形或线条等等。

<table> 
 <thead> 
  <tr> 
   <th><code>createPattern()</code>参数</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>image</td> 
   <td>规定要使用的图片、画布或视频元素</td> 
  </tr> 
  <tr> 
   <td>repeat（默认）</td> 
   <td>在水平和垂直方向重复</td> 
  </tr> 
  <tr> 
   <td>repeat-x</td> 
   <td>只在水平方向重复</td> 
  </tr> 
  <tr> 
   <td>repeat-y</td> 
   <td>只在垂直方向重复</td> 
  </tr> 
  <tr> 
   <td>no-repeat</td> 
   <td>不重复</td> 
  </tr> 
 </tbody> 
</table>

使用示例：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("lamp");
    var pat=ctx.createPattern(img,"repeat");
    ctx.rect(0,0,150,100);
    ctx.fillStyle=pat;
    ctx.fill();

1.  `createRadialGradient()`  
    创建放射状或圆形渐变对象  
    ⚠️请使用该对象作为 strokeStyle 或 fillStyle 属性的值。  
    ⚠️请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

<table> 
 <thead> 
  <tr> 
   <th><code>createRadialGradient()</code>参数</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x0</td> 
   <td>渐变开始圆x坐标</td> 
  </tr> 
  <tr> 
   <td>y0</td> 
   <td>渐变开始圆y坐标</td> 
  </tr> 
  <tr> 
   <td>r0</td> 
   <td>渐变开始圆半径</td> 
  </tr> 
  <tr> 
   <td>x1</td> 
   <td>渐变结束圆x坐标</td> 
  </tr> 
  <tr> 
   <td>y1</td> 
   <td>渐变结束圆y坐标</td> 
  </tr> 
  <tr> 
   <td>r1</td> 
   <td>渐变结束圆半径</td> 
  </tr> 
 </tbody> 
</table>

1.  `addColorStop()`

`addColorStop()`方法规定 `gradient`对象中的颜色和位置。  
`addColorStop()`方法与 `createLinearGradient()`或 `createRadialGradient()`一起使用。  
⚠️可以多次调用 `addColorStop()`方法来改变渐变。如果不对 \`\`\`gradient \`\`对象使用该方法，那么渐变将不可见。为了获得可见的渐变，需要创建至少一个色标。

<table> 
 <thead> 
  <tr> 
   <th><code>addColorStop()</code>参数</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>stop</td> 
   <td>介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>在结束位置显示的 CSS 颜色值</td> 
  </tr> 
 </tbody> 
</table>

####  线性样式: ####

1.  `lineCap`  
    设置或返回线条的结束端点样式  
    ⚠️"round" 和 “square” 会使线条略微变长

<table> 
 <thead> 
  <tr> 
   <th>lineCap属性值</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>butt(默认)</td> 
   <td>线条每个末端平直边缘</td> 
  </tr> 
  <tr> 
   <td>round</td> 
   <td>线条每个末端添加圆形线帽</td> 
  </tr> 
  <tr> 
   <td>square</td> 
   <td>线条每个末端添加正方形线帽</td> 
  </tr> 
 </tbody> 
</table>

1.  `lineJoin`  
    设置或返回两条线相交时，所创建的拐角类型

<table> 
 <thead> 
  <tr> 
   <th>lineJoin属性值</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>bevel</td> 
   <td>斜角</td> 
  </tr> 
  <tr> 
   <td>round</td> 
   <td>圆角</td> 
  </tr> 
  <tr> 
   <td>miter （默认）</td> 
   <td>尖角</td> 
  </tr> 
 </tbody> 
</table>

1.  `lineWidth`  
    设置或返回当前线条宽度  
    值： number
2.  `miterLimit`  
    设置或返回最大斜接长度  
    ⚠️斜接长度指的是在两条线交汇处内角和外角之间的距离。  
    如图：  
    ![在这里插入图片描述][20191016110036317.png]  
    ⚠️只有当 lineJoin 属性为 “miter” 时，miterLimit 才有效

值： number（正数。规定最大斜接长度。  
如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 “bevel” 类型来显示。）

####  矩形: ####

1.  `rect()`  
    创建矩形  
    绘制 150\*100 像素的矩形：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.rect(20,20,150,100);
    ctx.stroke();

⚠️使用 `stroke()`或 `fill()`方法在画布上实际地绘制矩形。

<table> 
 <thead> 
  <tr> 
   <th>rect()参数</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>矩形左上角x坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>矩形左上角y坐标</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>矩形宽度px</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>矩形高度px</td> 
  </tr> 
 </tbody> 
</table>

通过 rect() 方法来创建三个矩形：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    // 红色矩形
    ctx.beginPath();
    ctx.lineWidth="6";
    ctx.strokeStyle="red";
    ctx.rect(5,5,290,140);
    ctx.stroke();
    
    // 绿色矩形
    ctx.beginPath();
    ctx.lineWidth="4";
    ctx.strokeStyle="green";
    ctx.rect(30,30,50,50);
    ctx.stroke();
    
    // 蓝色矩形
    ctx.beginPath();
    ctx.lineWidth="10";
    ctx.strokeStyle="blue";
    ctx.rect(50,50,150,80);
    ctx.stroke();

![在这里插入图片描述][20191016110723456.png]  
2. `fillRect()`  
绘制被填充的矩形

<table> 
 <thead> 
  <tr> 
   <th>fillRect()参数</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>矩形左上角x坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>矩形左上角y坐标</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>矩形宽度px</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>矩形高度px</td> 
  </tr> 
 </tbody> 
</table>

1.  `strokeRect()`  
    绘制无填充的矩形

<table> 
 <thead> 
  <tr> 
   <th>strokeRect()参数</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>矩形左上角x坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>矩形左上角y坐标</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>矩形宽度px</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>矩形高度px</td> 
  </tr> 
 </tbody> 
</table>

⚠️笔触的默认颜色是黑色。  
使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。

1.  `clearRect()`  
    在给定的矩形内清除指定的像素

<table> 
 <thead> 
  <tr> 
   <th>clearRect()参数</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>要清除 矩形左上角x坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>要清除矩形左上角y坐标</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>要清除矩形宽度px</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>要清除矩形高度px</td> 
  </tr> 
 </tbody> 
</table>

示例：  
在给定矩形内清空一个矩形：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="red";
    ctx.fillRect(0,0,300,150);
    ctx.clearRect(20,20,100,50);

![在这里插入图片描述][2019101611151013.png]

####  路径: ####

1.  `fill()`  
    填充当前绘图（路径）  
    默认颜色是黑色。  
    ⚠️使用`fillStyle`属性来填充另一种颜色/渐变。  
    如果路径未关闭，那么 `fill()`方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

示例：  
绘制 150\*100 像素的矩形，然后用绿色来给它填色：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.rect(20,20,150,100);
    ctx.fillStyle="green";
    ctx.fill();

![在这里插入图片描述][20191016112000714.png]  
2. `stroke()`  
绘制已定义的路径

`stroke()`方法会实际地绘制出通过`moveTo()`和\`\`\`lineTo() \`\`方法定义的路径。默认颜色是黑色。  
⚠️用 strokeStyle 属性来绘制另一种颜色/渐变。

示例：  
绘制一条路径，形状是绿色的字母 L：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,100);
    ctx.lineTo(70,100);
    ctx.strokeStyle="green";
    ctx.stroke();

![在这里插入图片描述][20191016112307314.png]

1.  `beginPath()`  
    开始一条路径或者重置当前路径

⚠️使用这些方法来创建路径：`moveTo()`、`lineTo()`、`quadricCurveTo()`、`bezierCurveTo()`、`arcTo()`以及`arc()`。  
使用 `stroke()`方法在画布上绘制确切的路径。

示例：  
在画布上绘制两条路径；红色和蓝色：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.beginPath();
    ctx.lineWidth="5";
    ctx.strokeStyle="red"; // 红色路径
    ctx.moveTo(0,75);
    ctx.lineTo(250,75);
    ctx.stroke(); // 进行绘制
    
    ctx.beginPath();
    ctx.strokeStyle="blue"; // 蓝色路径
    ctx.moveTo(50,0);
    ctx.lineTo(150,130);
    ctx.stroke(); // 进行绘制

![在这里插入图片描述][20191016112618682.png]  
4. `moveTo()`  
把路径移动到画布中到指定点且不创建线条

<table> 
 <thead> 
  <tr> 
   <th>moveTO()参数</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>路径目标位置x坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>路径目标位置y坐标</td> 
  </tr> 
 </tbody> 
</table>

示例：  
开始一条路径，移动到位置 0,0。创建到达位置 300,150 的一条线：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(300,150);
    ctx.stroke();

![在这里插入图片描述][2019101611300655.png]  
5. `closePath()`  
创建从当前点回到起始点到路径

示例：  
绘制一条路径，形式是字母 L，然后绘制线条以返回开始点：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,100);
    ctx.lineTo(70,100);
    ctx.closePath();
    ctx.stroke();

![在这里插入图片描述][20191016113221629.png]  
6.`lineTo()`  
添加一个新点，然后在画布中创建从该点到最后指定点的线条

<table> 
 <thead> 
  <tr> 
   <th>lineTo()参数</th> 
   <th>value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>路径目标位置的x坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>路径目标位置y坐标</td> 
  </tr> 
 </tbody> 
</table>

1.  `clip()`  
    从原始画布剪切任意形状和尺寸区域  
    ⚠️一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。
2.  `quadraticCurveTo()`  
    通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cpx</td> 
   <td>贝塞尔控制点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>cpy</td> 
   <td>贝塞尔控制点的 y 坐标</td> 
  </tr> 
  <tr> 
   <td>x</td> 
   <td>结束点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>结束点的 y 坐标</td> 
  </tr> 
 </tbody> 
</table>

示例：  
绘制一条二次贝塞尔曲线：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.quadraticCurveTo(20,100,200,20);
    ctx.stroke();

![在这里插入图片描述][20191016130927932.png]  
9. `arc()`  
arc() 方法创建弧/曲线（用于创建圆或部分圆）。  
⚠️如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。  
使用 `stroke()`或 `fill()`方法在画布上绘制实际的弧。  
![在这里插入图片描述][20191016131238985.png]  
中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)  
起始角：arc(100,75,50,0,1.5*Math.PI)  
结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

<table> 
 <thead> 
  <tr> 
   <th>arc()参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>圆的中心的 x 坐标。</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>圆的中心的 y 坐标。</td> 
  </tr> 
  <tr> 
   <td>r</td> 
   <td>圆的半径。</td> 
  </tr> 
  <tr> 
   <td>sAngle</td> 
   <td>起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。</td> 
  </tr> 
  <tr> 
   <td>eAngle</td> 
   <td>结束角，以弧度计。</td> 
  </tr> 
  <tr> 
   <td>counterclockwise</td> 
   <td>可选规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。</td> 
  </tr> 
 </tbody> 
</table>

示例：  
创建一个圆形：

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

如图：  
![在这里插入图片描述][20191016131546577.png]  
10. `arcTo()`  
`arcTo()`方法在画布上创建介于两个切线之间的弧/曲线。  
⚠️使用 `stroke()`方法在画布上绘制确切的弧。

<table> 
 <thead> 
  <tr> 
   <th>arcTo()参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x1</td> 
   <td>弧的起点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y1</td> 
   <td>弧的起点的 y 坐标</td> 
  </tr> 
  <tr> 
   <td>x2</td> 
   <td>弧的终点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y2</td> 
   <td>弧的终点的 y 坐标</td> 
  </tr> 
  <tr> 
   <td>r</td> 
   <td>弧的半径</td> 
  </tr> 
 </tbody> 
</table>

示例：  
在画布上创建介于两个切线之间的弧：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.beginPath();
    ctx.moveTo(20,20);           // 创建开始点
    ctx.lineTo(100,20);          // 创建水平线
    ctx.arcTo(150,20,150,70,50); // 创建弧
    ctx.lineTo(150,120);         // 创建垂直线
    ctx.stroke();                // 进行绘制

![在这里插入图片描述][20191016131850192.png]

1.  `isPointInPath()`  
    `isPointInPath()`方法返回`true`，如果指定的点位于当前路径中；否则返回 `false`。

<table> 
 <thead> 
  <tr> 
   <th>isPointInPath()参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>测试的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>测试的 y 坐标</td> 
  </tr> 
 </tbody> 
</table>

####  转换: ####

1.  `scale()`  
    缩放当前绘图更大或更小  
    ⚠️如果对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。

<table> 
 <thead> 
  <tr> 
   <th>scale()参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scalewidth</td> 
   <td>缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)</td> 
  </tr> 
  <tr> 
   <td>scaleheight</td> 
   <td>缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)</td> 
  </tr> 
 </tbody> 
</table>

示例：  
绘制一个矩形；放大到 200%，再次绘制矩形；放大到 200%，然后再次绘制矩形；放大到 200%，再次绘制矩形：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.strokeRect(5,5,25,15);
    ctx.scale(2,2);
    ctx.strokeRect(5,5,25,15);
    ctx.scale(2,2);
    ctx.strokeRect(5,5,25,15);
    ctx.scale(2,2);
    ctx.strokeRect(5,5,25,15);

如图：  
![在这里插入图片描述][20191016132553743.png]  
2. `rotate()`  
方法旋转当前的绘图。

<table> 
 <thead> 
  <tr> 
   <th>rotate()参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>angle</td> 
   <td>旋转角度，以弧度计。如需将角度转换为弧度，请使用 degrees<em>Math.PI/180 公式进行计算。举例：如需旋转 5 度，可规定下面的公式：5</em>Math.PI/180。</td> 
  </tr> 
 </tbody> 
</table>

1.  `translate()`  
    重新映射画布上的 (0,0) 位置。

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>添加到水平坐标（x）上的值</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>添加到垂直坐标（y）上的值</td> 
  </tr> 
 </tbody> 
</table>

示例：  
在位置 (10,10) 处绘制一个矩形，将新的 (0,0) 位置设置为 (70,70)。再次绘制新的矩形（请注意现在矩形从位置 (80,80) 开始绘制）：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillRect(10,10,100,50);
    ctx.translate(70,70);
    ctx.fillRect(10,10,100,50);

如图：  
![在这里插入图片描述][20191016132938859.png]  
4. `setTransform()`  
把当前的变换矩阵重置为单位矩阵，然后以相同的参数运行 transform()。

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>a</td> 
   <td>水平旋转绘图</td> 
  </tr> 
  <tr> 
   <td>b</td> 
   <td>水平倾斜绘图</td> 
  </tr> 
  <tr> 
   <td>c</td> 
   <td>垂直倾斜绘图</td> 
  </tr> 
  <tr> 
   <td>d</td> 
   <td>垂直缩放绘图</td> 
  </tr> 
  <tr> 
   <td>e</td> 
   <td>水平移动绘图</td> 
  </tr> 
  <tr> 
   <td>f</td> 
   <td>垂直移动绘图</td> 
  </tr> 
 </tbody> 
</table>

示例：  
绘制一个矩形，通过 setTransform() 重置并创建新的变换矩阵，再次绘制矩形，重置并创建新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 setTransform() 时，它都会重置前一个变换矩阵然后构建新的矩阵，因此在下面的例子中，不会显示红色矩形，因为它在蓝色矩形下面：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.fillStyle="yellow";
    ctx.fillRect(0,0,250,100)
    
    ctx.setTransform(1,0.5,-0.5,1,30,10);
    ctx.fillStyle="red";
    ctx.fillRect(0,0,250,100);
    
    ctx.setTransform(1,0.5,-0.5,1,30,10);
    ctx.fillStyle="blue";
    ctx.fillRect(0,0,250,100);

![在这里插入图片描述][20191016133141653.png]

####  文本: ####

1.  `font`  
    设置或返回文本内容的当前字体属性

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>font-style</td> 
   <td>规定字体样式。可能的值：normal italic oblique</td> 
  </tr> 
  <tr> 
   <td>font-variant</td> 
   <td>规定字体变体。可能的值：normal small-caps</td> 
  </tr> 
  <tr> 
   <td>font-weight</td> 
   <td>规定字体的粗细。可能的值： normal bold bolder lighter 100~900</td> 
  </tr> 
  <tr> 
   <td>font-size / line-height</td> 
   <td>规定字号和行高，以像素计。</td> 
  </tr> 
  <tr> 
   <td>font-family</td> 
   <td>规定字体系列。</td> 
  </tr> 
  <tr> 
   <td>caption</td> 
   <td>使用标题控件的字体（比如按钮、下拉列表等）。</td> 
  </tr> 
  <tr> 
   <td>icon</td> 
   <td>使用用于标记图标的字体。</td> 
  </tr> 
  <tr> 
   <td>menu</td> 
   <td>使用用于菜单中的字体（下拉列表和菜单列表）。</td> 
  </tr> 
  <tr> 
   <td>message-box</td> 
   <td>使用用于对话框中的字体。</td> 
  </tr> 
  <tr> 
   <td>small-caption</td> 
   <td>使用用于标记小型控件的字体。</td> 
  </tr> 
  <tr> 
   <td>status-bar</td> 
   <td>使用用于窗口状态栏中的字体。</td> 
  </tr> 
 </tbody> 
</table>

1.  `textAlign`  
    根据锚点，设置或返回文本内容的当前对齐方式

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>start 默认</td> 
   <td>文本在指定的位置开始。</td> 
  </tr> 
  <tr> 
   <td>end</td> 
   <td>文本在指定的位置结束。</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>文本的中心被放置在指定的位置。</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>文本左对齐。</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>文本右对齐。</td> 
  </tr> 
 </tbody> 
</table>

1.  `textBaseline`  
    设置或返回在绘制文本时的当前文本基线。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>alphabetic</td> 
   <td>默认。文本基线是普通的字母基线。</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>文本基线是 em 方框的顶端。。</td> 
  </tr> 
  <tr> 
   <td>hanging</td> 
   <td>文本基线是悬挂基线。</td> 
  </tr> 
  <tr> 
   <td>middle</td> 
   <td>文本基线是 em 方框的正中。</td> 
  </tr> 
  <tr> 
   <td>ideographic</td> 
   <td>文本基线是表意基线。</td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td>文本基线是 em 方框的底端。</td> 
  </tr> 
 </tbody> 
</table>

1.  `fillText()`  
    在画布上绘制填色的文本。文本的默认颜色是黑色。

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>规定在画布上输出的文本。</td> 
  </tr> 
  <tr> 
   <td>x</td> 
   <td>开始绘制文本的 x 坐标位置（相对于画布）。</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>开始绘制文本的 y 坐标位置（相对于画布）。</td> 
  </tr> 
  <tr> 
   <td>maxWidth</td> 
   <td>可选。允许的最大文本宽度，以像素计。</td> 
  </tr> 
 </tbody> 
</table>

1.  `strokeText()`  
    在画布上绘制文本（没有填色）。文本的默认颜色是黑色。  
    ⚠️使用 font 属性来定义字体和字号，并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本

1.  `measureText()`  
    返回包含一个对象，该对象包含以像素计的指定字体宽度。  
    ⚠️如果您需要在文本向画布输出之前，就了解文本的宽度，那么请使用该方法。

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>要测量的文本。</td> 
  </tr> 
 </tbody> 
</table>

####  图像绘制: ####

1.  `drawImage()`  
    在画布上绘制图像、画布或视频。  
    drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

语法 1  
在画布上定位图像：  
`context.drawImage(img,x,y);`  
语法 2  
在画布上定位图像，并规定图像的宽度和高度：  
`context.drawImage(img,x,y,width,height);`  
语法 3  
剪切图像，并在画布上定位被剪切的部分：  
`context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);`

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>img</td> 
   <td>规定要使用的图像、画布或视频。</td> 
  </tr> 
  <tr> 
   <td>sx</td> 
   <td>可选。开始剪切的 x 坐标位置。</td> 
  </tr> 
  <tr> 
   <td>sy</td> 
   <td>可选。开始剪切的 y 坐标位置。</td> 
  </tr> 
  <tr> 
   <td>swidth</td> 
   <td>可选。被剪切图像的宽度。</td> 
  </tr> 
  <tr> 
   <td>sheight</td> 
   <td>可选。被剪切图像的高度。</td> 
  </tr> 
  <tr> 
   <td>x</td> 
   <td>在画布上放置图像的 x 坐标位置。</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>在画布上放置图像的 y 坐标位置。</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>可选。要使用的图像的宽度。（伸展或缩小图像）</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>可选。要使用的图像的高度。（伸展或缩小图像）</td> 
  </tr> 
 </tbody> 
</table>

####  像素操作: ####

1.  `width`  
    返回 ImageData 对象的宽度，以像素计。
2.  `height`  
    返回 ImageData 对象的高度，以像素计。
3.  `data`  
    返回一个对象，其包含指定的 ImageData 对象的图像数据
4.  `createImageData()`  
    创建新的空白 `ImageData`对象。新对象的默认像素值`transparent black`。  
    对于`ImageData`对象中的每个像素，都存在着四方面的信息，即 RGBA 值：  
    R - 红色 (0-255)  
    G - 绿色 (0-255)  
    B - 蓝色 (0-255)  
    A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)  
    因此 ，`transparent black`表示`(0,0,0,0)`。  
    `color/alpha`以数组形式存在，并且既然数组包含了每个像素的四条信息，数组的大小是 `ImageData`对象的四倍。（获得数组大小有更简单的办法，就是使用`ImageDataObject.data.length）`  
    包含 `color/alpha`信息的数组存储于`ImageData`对象的`data`属性中。  
    ⚠️在操作完成数组中的 `color/alpha`信息之后，您可以使用 `putImageData()`方法将图像数据拷贝回画布上。

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>ImageData 对象的宽度，以像素计。</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>ImageData 对象的高度，以像素计。</td> 
  </tr> 
  <tr> 
   <td>imageData</td> 
   <td>另一个 ImageData 对象。</td> 
  </tr> 
 </tbody> 
</table>

1.  `getImageData()`  
    返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>开始复制的左上角位置的 x 坐标。</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>开始复制的左上角位置的 y 坐标。</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>将要复制的矩形区域的宽度。</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>将要复制的矩形区域的高度。</td> 
  </tr> 
 </tbody> 
</table>

1.  `putImageData()`  
    `putImageData()`方法将图像数据（从指定的 `ImageData`对象）放回画布上。

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>imgData</td> 
   <td>规定要放回画布的 ImageData 对象。</td> 
  </tr> 
  <tr> 
   <td>x</td> 
   <td>ImageData 对象左上角的 x 坐标，以像素计。</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>ImageData 对象左上角的 y 坐标，以像素计。</td> 
  </tr> 
  <tr> 
   <td>dirtyX</td> 
   <td>可选。水平值（x），以像素计，在画布上放置图像的位置。</td> 
  </tr> 
  <tr> 
   <td>dirtyY</td> 
   <td>可选。水平值（y），以像素计，在画布上放置图像的位置。</td> 
  </tr> 
  <tr> 
   <td>dirtyWidth</td> 
   <td>可选。在画布上绘制图像所使用的宽度。</td> 
  </tr> 
  <tr> 
   <td>dirtyHeight</td> 
   <td>可选。在画布上绘制图像所使用的高度。</td> 
  </tr> 
 </tbody> 
</table>

####  合成: ####

1.  `globalAlpha`  
    `globalAlpha`属性设置或返回绘图的当前透明值（`alpha`或 `transparency`）。  
    `globalAlpha`属性值必须是介于 0.0（完全透明） 与 1.0（不透明） 之间的数字。
2.  `globalCompositeOperation`  
    设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。  
    源图像 = 打算放置到画布上的绘图。  
    目标图像 = 已经放置在画布上的绘图。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>source-over 默认</td> 
   <td>在目标图像上显示源图像。</td> 
  </tr> 
  <tr> 
   <td>source-atop</td> 
   <td>在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。</td> 
  </tr> 
  <tr> 
   <td>source-in</td> 
   <td>在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。</td> 
  </tr> 
  <tr> 
   <td>source-out</td> 
   <td>在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。</td> 
  </tr> 
  <tr> 
   <td>destination-over</td> 
   <td>在源图像上方显示目标图像。</td> 
  </tr> 
  <tr> 
   <td>destination-atop</td> 
   <td>在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。</td> 
  </tr> 
  <tr> 
   <td>destination-in</td> 
   <td>在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。</td> 
  </tr> 
  <tr> 
   <td>destination-out</td> 
   <td>在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。</td> 
  </tr> 
  <tr> 
   <td>lighter</td> 
   <td>显示源图像 + 目标图像。</td> 
  </tr> 
  <tr> 
   <td>copy</td> 
   <td>显示源图像。忽略目标图像。</td> 
  </tr> 
  <tr> 
   <td>xor</td> 
   <td>使用异或操作对源图像与目标图像进行组合。</td> 
  </tr> 
 </tbody> 
</table>

####  其他: ####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>save()</td> 
   <td>保存当前环境的状</td> 
  </tr> 
  <tr> 
   <td>restore()</td> 
   <td>返回之前保存过的路径状态和属性</td> 
  </tr> 
  <tr> 
   <td>createEvent()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>getContext()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>toDataURL()</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

[20191016110036317.png]: /images/20230531/dd08ac96f1424a5d9eb219af8ba75e86.png
[20191016110723456.png]: /images/20230531/3892131aa9f44b84920704661b357398.png
[2019101611151013.png]: /images/20230531/a5debb17dd854c17a3ac1d69617bc8bf.png
[20191016112000714.png]: /images/20230531/ff39d88097b14525981216416ef5255f.png
[20191016112307314.png]: /images/20230531/662da9b1c94141d9a982797372224401.png
[20191016112618682.png]: /images/20230531/345fb70508d2422c9c38621c246c305a.png
[2019101611300655.png]: /images/20230531/9aa092a583ae4e148b35355f2d44c4ae.png
[20191016113221629.png]: /images/20230531/3570571c735a4673a667d9117852fb9a.png
[20191016130927932.png]: /images/20230531/3288054830a741c38ab5553f44caee66.png
[20191016131238985.png]: /images/20230531/f2420a50478f40639aa37731bdd949e2.png
[20191016131546577.png]: /images/20230531/905d874188af4ab9b0b6393b11ad4fbf.png
[20191016131850192.png]: /images/20230531/005d754f10004eb59594cd128bb2b780.png
[20191016132553743.png]: /images/20230531/5ab0e9be7543490487cb550df89ab703.png
[20191016132938859.png]: /images/20230531/4f30da1b7db04c37a0723d55232caf64.png
[20191016133141653.png]: /images/20230531/598aa1dce8fc4fc78e42629247218b2a.png