Canvas 实用API详解

小鱼儿 2021-09-12 07:32 441阅读 0赞

# 说明 #

本篇内容可以看做是一篇关于canvas的API文档，由于全文的篇幅较长，通常用于作为API文档查看，可通过目录查找。本篇也可做为想详细了解canvas所有操作的学习文章。Canvas 对象表示一个 HTML 画布元素<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化绘图操作。我们可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过 CanvasRenderingContext2D 对象获得。例如：

<canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
    	var c = document.getElementById("myCanvas");
    	var ctx = c.getContext("2d");
    	console.log(ctx); // CanvasRenderingContext2D对象
    	console.log(c.width); // 400
    	console.log(c.height); // 400
    </script>

<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。要从同一图形的一个 <canvas> 标记中移除元素，往往需要擦掉绘图重新绘制它。

# **Canvas对象的API详解** #

## 1.样式设置 fillStyle | strokeStyle  ##

指设置将要绘制图案的填充或边的样式

fillStyle、strokeStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:155px;">默认值：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">#000000</td> 
  </tr> 
  <tr> 
   <th style="vertical-align:baseline;">JavaScript 语法：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">context.fillStyle=color|gradient|pattern;</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:155px;">默认值：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">#000000</td> 
  </tr> 
  <tr> 
   <th style="vertical-align:baseline;">JavaScript 语法：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">context.strokeStyle=color|gradient|pattern;</td> 
  </tr> 
 </tbody> 
</table>

属性值：

CSS颜色的表示方式有：

——直接用颜色名称:"red" "green" "blue"；

——十六进制颜色值: "\#EEEEFF"；

——rgb(1-255,1-255,1-255)；

——rgba(1-255,1-255,1-255,透明度)；

常与设置样式配合使用的方法是：填充绘制和边绘制。

如绘制一个蓝色的矩形，如：

![Center][]

ctx.fillStyle = "#0000ff";
    ctx.rect(20, 20, 150, 100);
    ctx.fill();

半透明的蓝色矩形，如：

ctx.fillStyle = "rgba(0, 0, 255, 0.5)";

## 2.形状设置 ##

形状设置包括了矩形、圆形和贝塞尔曲线。

<table> 
 <tbody> 
  <tr> 
   <th style="border-color:#aaaaaa;vertical-align:baseline;width:190px;">方法</th> 
   <th style="border-color:#aaaaaa;vertical-align:baseline;">描述</th> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_rect.asp" rel="nofollow">rect()</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">创建矩形</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_fillrect.asp" rel="nofollow">fillRect()</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">绘制“被填充”的矩形</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_strokerect.asp" rel="nofollow">strokeRect()</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">绘制矩形（无填充）</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_clearrect.asp" rel="nofollow">clearRect()</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">在给定的矩形内清除指定的像素</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_quadraticcurveto.asp" rel="nofollow">quadraticCurveTo()</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">创建二次贝塞尔曲线</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_beziercurveto.asp" rel="nofollow">bezierCurveTo()</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">创建三次方贝塞尔曲线</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_arc.asp" rel="nofollow">arc()</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">创建弧/曲线（用于创建圆形或部分圆）</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_arcto.asp" rel="nofollow">arcTo()</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">创建两切线之间的弧/曲线</td> 
  </tr> 
 </tbody> 
</table>

### 矩形 rect（） | fillRect（） | strokeRect（） | clearRect（） ###

相关JavaScript语法：

context.rect(x,y,width,height);

context.fillRect(x,y,width,height);

context.strokeRect(x,y,width,height);

context.clearRect(x,y,width,height);

属性值：

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

![Center 1][]

源码：

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

（注）方法beginPath（）的作用在于从新的路径（或新起点）开始绘制图案，简单来说新图案的绘制过程不受画布已有图案影响。

### 圆形 arc（） ###

JavaScript语法：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

属性值：

（提示）：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2\*Math.PI。  
（提示）：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

![Center 2][]

绘制一个圆形：

![Center 3][]

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

### 弧 arcTo（） ###

在画布上创建介于两个切线之间的弧的JavaScript语法：

context.arcTo(x1,y1,x2,y2,r);

属性值：

绘制一道两切线间的弧：

![Center 4][]

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();                // 进行绘制

### 二次贝塞尔曲线 quadraticCurveTo（） ###

JavaScript语法：

context.quadraticCurveTo(cpx,cpy,x,y);

属性值：

（提示）：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。  
![Center 5][]

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

![Center 6][]

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

### 三次贝塞尔曲线 bezierCurveTo（） ###

JavaScript语法：

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

属性值：

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">cp1x</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">第一个贝塞尔控制点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">cp1y</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">第一个贝塞尔控制点的 y 坐标</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">cp2x</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">第二个贝塞尔控制点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">cp2y</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">第二个贝塞尔控制点的 y 坐标</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">x</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">结束点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">y</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">结束点的 y 坐标</td> 
  </tr> 
 </tbody> 
</table>

（提示）：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

![Center 7][]

绘制一条三次贝塞尔曲线：

![Center 8][]

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

## 3.线条和路径设置 ##

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:190px;">方法</th> 
   <th style="vertical-align:baseline;">描述</th> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_linecap.asp" rel="nofollow">lineCap</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回线条的结束端点样式</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_linejoin.asp" rel="nofollow">lineJoin</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回两条线相交时，所创建的拐角类型</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_linewidth.asp" rel="nofollow">lineWidth</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回当前的线条宽度</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_miterlimit.asp" rel="nofollow">miterLimit</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回最大斜接长度</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_beginpath.asp" rel="nofollow">beginPath()</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">起始一条路径，或重置当前路径</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_closepath.asp" rel="nofollow">closePath()</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">创建从当前点回到起始点的路径</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_moveto.asp" rel="nofollow">moveTo()</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">把路径移动到画布中的指定点，不创建线条</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_lineto.asp" rel="nofollow">lineTo()</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">添加一个新点，然后在画布中创建从该点到最后指定点的线条</td> 
  </tr> 
 </tbody> 
</table>

### 结束线帽lineCap ###

指设置绘制圆形的结束线帽：

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:155px;">默认值：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">butt</td> 
  </tr> 
  <tr> 
   <th style="vertical-align:baseline;">JavaScript 语法：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">context.lineCap="butt|round|square"; // 平直边缘 | 圆形线帽 | 方形线帽</td> 
  </tr> 
 </tbody> 
</table>

绘制一条结束点为圆形线帽的直线：  
![Center 9][]

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

### 拐角类型lineJoin ###

两线相交点拐角的类型。当类型值为miter时，常与miterLimit一起使用。因为当两线夹角越小时，miter尖角会越长，miterLimit用于控制尖角的长度。

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:155px;">默认值：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">miter</td> 
  </tr> 
  <tr> 
   <th style="vertical-align:baseline;">JavaScript 语法：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">context.lineJoin="bevel|round|miter"; // 斜角 | 圆角 | 尖角</td> 
  </tr> 
 </tbody> 
</table>

以最大斜接长度 5 绘制线条：

![Center 10][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.lineWidth=10;
    ctx.lineJoin="miter";
    ctx.miterLimit=5;
    ctx.moveTo(20,20);
    ctx.lineTo(50,27);
    ctx.lineTo(20,34);
    ctx.stroke();

（提示）：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示（图解 3）：

![Center 11][]

### beginPath( ) | closePath( ) ###

beginPath（）可以理解为从新的路径（或新起点）开始绘制图案，简单来说新图案的绘制过程不受画布已有图案影响。如不设置beginPath（），多次绘制时，已有图案会受到新图案的绘制样式影响。closePath( )是指闭合路径，即从当前笔触点至最开始的笔触起始点创建连接直线，形成闭合。

绘制闭合三角形：

![Center 12][]

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();
    ctx.fillStyle="green";
    ctx.fill();

### moveTo( ) | lineTo( ) ###

moveTo（）是指将笔触移动到指定坐标点，lineTo是指从当前笔触坐标点往指定坐标点绘制一条直线。

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

![Center 13][]

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

## 4.文本设置 ##

包括文本样式设置和创建。

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:190px;">属性</th> 
   <th style="vertical-align:baseline;">描述</th> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_font.asp" rel="nofollow">font</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回文本内容的当前字体属性</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_textalign.asp" rel="nofollow">textAlign</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回文本内容的当前对齐方式</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_textbaseline.asp" rel="nofollow">textBaseline</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回在绘制文本时使用的当前文本基线</td> 
  </tr> 
 </tbody> 
</table>

### 文本样式font ###

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:155px;">默认值：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">10px sans-serif</td> 
  </tr> 
  <tr> 
   <th style="vertical-align:baseline;">JavaScript 语法：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">context.font="italic small-caps bold 12px arial";</td> 
  </tr> 
 </tbody> 
</table>

属性值：

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:155px;">值</th> 
   <th style="vertical-align:baseline;">描述</th> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">font-style</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"> <p>规定字体样式。可能的值：</p> 
    <ul style="margin-left:20px;"> 
     <li>normal</li> 
     <li>italic</li> 
     <li>oblique</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">font-variant</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"> <p>规定字体变体。可能的值：</p> 
    <ul style="margin-left:20px;"> 
     <li>normal</li> 
     <li>small-caps</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">font-weight</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"> <p>规定字体的粗细。可能的值：</p> 
    <ul style="margin-left:20px;"> 
     <li>normal</li> 
     <li>bold</li> 
     <li>bolder</li> 
     <li>lighter</li> 
     <li>100</li> 
     <li>200</li> 
     <li>300</li> 
     <li>400</li> 
     <li>500</li> 
     <li>600</li> 
     <li>700</li> 
     <li>800</li> 
     <li>900</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">font-size&nbsp;/&nbsp;line-height</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">规定字号和行高，以像素计。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">font-family</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">规定字体系列。</td> 
  </tr> 
 </tbody> 
</table>

在画布上写一段 40 像素的文本，使用的字体是 "Arial"：

![Center 14][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="40px Arial";
    ctx.fillText("Hello World",10,50);

### 文本对齐textAlign ###

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:155px;">默认值：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">start</td> 
  </tr> 
  <tr> 
   <th style="vertical-align:baseline;">JavaScript 语法：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">context.textAlign="center|end|left|right|start";</td> 
  </tr> 
 </tbody> 
</table>

属性值：

在位置 150 创建一条红线。位置 150 是下面例子中定义的所有文本的锚点。请研究每种 textAlign 属性值的效果：

![Center 15][]

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    
    // 在位置 150 创建蓝线
    ctx.strokeStyle = "blue";
    ctx.moveTo(150, 0);
    ctx.lineTo(150, 170);
    ctx.stroke();
    
    ctx.font = "15px Arial";
    
    // 显示不同的 textAlign 值
    ctx.textAlign = "start";
    ctx.fillText("textAlign=start", 150, 15); //起始位置为注册坐标
    ctx.textAlign = "end";
    ctx.fillText("textAlign=end", 150, 30); //结束位置为注册坐标
    ctx.textAlign = "left";
    ctx.fillText("textAlign=left", 150, 45); //居中对齐
    ctx.textAlign = "center";
    ctx.fillText("textAlign=center", 150, 60); //左对齐
    ctx.textAlign = "right";
    ctx.fillText("textAlign=right", 150, 75); //右对齐

### 文本基线textBaseLine ###

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:155px;">默认值：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">alphabetic</td> 
  </tr> 
  <tr> 
   <th style="vertical-align:baseline;">JavaScript 语法：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";</td> 
  </tr> 
 </tbody> 
</table>

属性值：

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:155px;">值</th> 
   <th style="vertical-align:baseline;">描述</th> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">alphabetic</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">默认。文本基线是普通的字母基线。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">top</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">文本基线是 em 方框的顶端。。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">hanging</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">文本基线是悬挂基线。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">middle</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">文本基线是 em 方框的正中。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">ideographic</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">文本基线是表意基线。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">bottom</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">文本基线是 em 方框的底端。</td> 
  </tr> 
 </tbody> 
</table>

实例：

![Center 16][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    //在位置 y=100 绘制蓝色线条
    ctx.strokeStyle="blue";
    ctx.moveTo(5,100);
    ctx.lineTo(395,100);
    ctx.stroke();
    
    ctx.font="20px Arial"
    
    //在 y=200 以不同的 textBaseline 值放置每个单词
    ctx.textBaseline="top";
    ctx.fillText("Top",5,100);
    ctx.textBaseline="bottom";
    ctx.fillText("Bottom",50,100);
    ctx.textBaseline="middle";
    ctx.fillText("Middle",120,100);
    ctx.textBaseline="alphabetic";
    ctx.fillText("Alphabetic",190,100);
    ctx.textBaseline="hanging";
    ctx.fillText("Hanging",290,100);

### 绘制文本fillText（） | strokeText（） ###

JavaScript 语法：

context.fillText(text,x,y,maxWidth);

context.strokeText(text,x,y,maxWidth);

属性值：

使用 fillText()，在画布上写文本 "Hello world!" 和 "w3school.com.cn"：

![Center 17][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.font="20px Georgia";
    ctx.fillText("Hello World!",10,50);
    
    ctx.font="30px Verdana";
    // 创建渐变
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    // 用渐变填色
    ctx.fillStyle=gradient;
    ctx.fillText("w3school.com.cn",10,90);

### 测量文本宽度measureText() ###

JavaScript语法：

context.measureText(text).width;

## 5.变换设置 ##

### 缩放scale（） | 旋转rotate（） | 位移translate（） ###

JavaScript语法：

context.scale(scalewidth,scaleheight); //缩放

context.rotate(angle); //旋转

context.translate(x,y); //位移

### 矩阵设置transform() | setTransform() ###

两者JavaScript语法相同，以transform为例：

context.transform(a,b,c,d,e,f);

属性值：

区别：transform()变换是指在上一次变换的状态基础上再次变换；setTransform()变换是指先重置到最初始的状态再开始变换。

绘制一个矩形；通过 transform() 添加一个新的变换矩阵，再次绘制矩形；添加一个新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 transform() 时，它都会在前一个变换矩阵上构建：

![Center 18][]

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

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

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

## 6.阴影设置 ##

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:190px;">属性</th> 
   <th style="vertical-align:baseline;">描述</th> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_shadowcolor.asp" rel="nofollow">shadowColor</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回用于阴影的颜色</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_shadowblur.asp" rel="nofollow">shadowBlur</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回用于阴影的模糊级别</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_shadowoffsetx.asp" rel="nofollow">shadowOffsetX</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回阴影距形状的水平距离</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_shadowoffsety.asp" rel="nofollow">shadowOffsetY</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回阴影距形状的垂直距离</td> 
  </tr> 
 </tbody> 
</table>

### 阴影颜色shadowColor | 阴影模糊级别shadowBlur ###

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:155px;">默认值：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">#000000</td> 
  </tr> 
  <tr> 
   <th style="vertical-align:baseline;">JavaScript 语法：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">context.shadowColor=color;</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:155px;">默认值：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">0</td> 
  </tr> 
  <tr> 
   <th style="vertical-align:baseline;">JavaScript 语法：</th> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">context.shadowBlur=number;</td> 
  </tr> 
 </tbody> 
</table>

绘制一个带有黑色阴影的蓝色矩形，模糊级数是 20：

![Center 20][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.shadowBlur=20;
    ctx.shadowColor="black";
    ctx.fillStyle="blue";
    ctx.fillRect(20,20,100,80);

### 阴影水平坐标shadowOffsetX | 阴影垂直坐标shadowOffsetY ###

绘制一个矩形，带有向右偏移 20 像素的阴影（从矩形的 left 位置），带有向下偏移 20 像素的阴影（从矩形的 top 位置）：  
![Center 21][]

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 20;
    ctx.shadowOffsetY = 20;
    ctx.shadowColor = "black";
    ctx.fillStyle = "blue";
    ctx.fillRect(20, 20, 100, 80);

## 7.色彩渐变设置 ##

### 渐变色彩和停止位置addColorStop() ###

JavaScrip语法

gradient.addColorStop(stop,color);

属性值：

### 线性渐变createLinearGradient() ###

语法：

context.createLinearGradient(x0,y0,x1,y1);

属性值：

(提示)：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

定义从黑到白的渐变（从左向右），作为矩形的填充样式：

![Center 22][]

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

### 放射性渐变createRadialGradient() ###

语法：

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

属性值：

绘制一个矩形，并用放射状/圆形渐变进行填充：

![Center 23][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var grd=ctx.createRadialGradient(75,50,5,75,50,40);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,100);

## 8.其它设置 ##

### 图像重复createPattern() ###

JavaScript语法：

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

属性值：

用到的图像：

![Center 24][]

在水平和垂直方向重复图像：

![Center 25][]

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

### 点是否位于当前路径中isPointInPath() ###

JavaScript语法：

context.isPointInPath(x,y);

属性性：

绘制一个矩形，如果点 20,50 位于当前路径中：

![Center 26][]

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

### 绘制图像视频drawImage() ###

JavaScript 语法 1  
在画布上定位图像：

context.drawImage(img,x,y);

JavaScript 语法 2  
在画布上定位图像，并规定图像的宽度和高度：

context.drawImage(img,x,y,width,height);

JavaScript 语法 3  
剪切图像，并在画布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

属性值：

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:155px;">参数</th> 
   <th style="vertical-align:baseline;">描述</th> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">img</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">规定要使用的图像、画布或视频。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">sx</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">可选。开始剪切的 x 坐标位置。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">sy</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">可选。开始剪切的 y 坐标位置。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">swidth</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">可选。被剪切图像的宽度。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">sheight</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">可选。被剪切图像的高度。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">x</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">在画布上放置图像的 x 坐标位置。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">y</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">在画布上放置图像的 y 坐标位置。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">width</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">可选。要使用的图像的宽度。（伸展或缩小图像）</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">height</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">可选。要使用的图像的高度。（伸展或缩小图像）</td> 
  </tr> 
 </tbody> 
</table>

剪切图片，并在画布上对被剪切的部分进行定位：

![Center 27][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,90,130,90,80,20,20,90,80);

### 像素操作createImageData | getImageData() | putImageData() ###

### 合成操作globalAlpha() | globalCompositeOperation() ###

### （注）globalCompositeOperation可用于遮罩截图功能。 ###

### 更多 ###

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:190px;">方法</th> 
   <th style="vertical-align:baseline;">描述</th> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">save()</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">保存当前环境的状态</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">restore()</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">返回之前保存过的路径状态和属性</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">createEvent()</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">getContext()</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">toDataURL()</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

[Center]: /images/20210813/edb98f1c82bc4141a36845221a0eb201.png
[Center 1]: /images/20210813/f6f0daed220744e4a6151dc33a14aed5.png
[Center 2]: /images/20210813/c7ce40252521428f9dac06e63082cc39.png
[Center 3]: /images/20210813/83e53b7e8bd245339528feec7024f99b.png
[Center 4]: /images/20210813/a5803a0a13ab4361932864675043fe59.png
[Center 5]: /images/20210813/8d2b93d464d74a57a0457ebc7c3e3bc2.png
[Center 6]: /images/20210813/ee2912b2019942cf82934ae5a30c518c.png
[Center 7]: /images/20210813/cca8ee1f45584869986b7f94b6f13893.png
[Center 8]: /images/20210813/b9f864a250dc498d8459715515479525.png
[Center 9]: /images/20210813/fa4c04fdfdda4a4da93a2188c418fa62.png
[Center 10]: /images/20210813/49c364a8ed4f4713ae39e9e5a7f67a80.png
[Center 11]: /images/20210813/15149238a01243f09a6a040412b73fbd.png
[Center 12]: /images/20210813/6f3f5531b853407e9ea711e3100a6238.png
[Center 13]: /images/20210813/169b256b327e473290b105e89d8b6435.png
[Center 14]: /images/20210813/b0b22ef984c24a06b175c074e71e4410.png
[Center 15]: /images/20210813/70b29b3cd0ff44fcb15142e48dc07d82.png
[Center 16]: /images/20210813/aeeac30dcae94c4fb12135e46e276b86.png
[Center 17]: /images/20210813/aba0f8ef0f674cb39ddd2fcba4d2a39b.png
[Center 18]: /images/20210813/83c4df63cbf24d1b911abb1e4465f6ba.png
[Center 19]: /images/20210813/70a518955cb5444eb1e1a3bf7400d62e.png
[Center 20]: /images/20210813/fcaa7fcbb7884d1abcb0b0af575c6624.png
[Center 21]: /images/20210813/39bceeb05ca644729ac4e8aa9104f912.png
[Center 22]: /images/20210813/2269657222f348498c1ab9f1b45e623e.png
[Center 23]: /images/20210813/8e27f509ad7f41cdbd7efd99b49987b8.png
[Center 24]: /images/20210813/855f3c71b18f4161b24dd0db7e5fd00c.png
[Center 25]: /images/20210813/a80f3a8ac9954628a929b074af3ab2ae.png
[Center 26]: /images/20210813/8dddf70382f84e49bfa99595ca396926.png
[Center 27]: /images/20210813/133c10c7520c495898e620950941edc9.png