html5 canvas 详细教程1---样式设置/矩形绘制/路径绘制

       <canvas></canvas>是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图 ，最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。

一，绘图工具： getcontext-----getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

定义和用法

getContext() 方法返回一个用于在画布上绘图的环境。

context是一个封装了很多绘图功能的对象，获取这个对象的方法是    var ctx(或context)=canvas.getContext("2d");//html5仅支持2d不支持3d

参数

参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

返回值

一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。

描述

返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。

二，利用 ctx对象进行图像的绘制：

颜色、样式和阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影距形状的水平距离
shadowOffsetY	设置或返回阴影距形状的垂直距离

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）
createPattern()	在指定的方向上重复指定的元素
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）
addColorStop()	规定渐变对象中的颜色和停止位置

线条样式

属性	描述
lineCap	设置或返回线条的结束端点样式
lineJoin	设置或返回两条线相交时，所创建的拐角类型
lineWidth	设置或返回当前的线条宽度
miterLimit	设置或返回最大斜接长度

矩形

方法	描述
rect()	创建矩形
fillRect()	绘制“被填充”的矩形
strokeRect()	绘制矩形（无填充）
clearRect()	在给定的矩形内清除指定的像素

路径

方法	描述
fill()	填充当前绘图（路径）
stroke()	绘制已定义的路径
beginPath()	起始一条路径，或重置当前路径
moveTo()	把路径移动到画布中的指定点，不创建线条
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip()	从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()	创建二次贝塞尔曲线
bezierCurveTo()	创建三次方贝塞尔曲线
arc()	创建弧/曲线（用于创建圆形或部分圆）
arcTo()	创建两切线之间的弧/曲线
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false

转换

方法	描述
scale()	缩放当前绘图至更大或更小
rotate()	旋转当前绘图
translate()	重新映射画布上的 (0,0) 位置
transform()	替换绘图的当前转换矩阵
setTransform()	将当前转换重置为单位矩阵。然后运行 transform()

文本

属性	描述
font	设置或返回文本内容的当前字体属性
textAlign	设置或返回文本内容的当前对齐方式
textBaseline	设置或返回在绘制文本时使用的当前文本基线

方法	描述
fillText()	在画布上绘制“被填充的”文本
strokeText()	在画布上绘制文本（无填充）
measureText()	返回包含指定文本宽度的对象

图像绘制

方法	描述
drawImage()	向画布上绘制图像、画布或视频

像素操作

属性	描述
width	返回 ImageData 对象的宽度
height	返回 ImageData 对象的高度
data	返回一个对象，其包含指定的 ImageData 对象的图像数据

方法	描述
createImageData()	创建新的、空白的 ImageData 对象
getImageData()	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData()	把图像数据（从指定的 ImageData 对象）放回画布上

合成

属性	描述
globalAlpha	设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上

其他

方法	描述
save()	保存当前环境的状态
restore()	返回之前保存过的路径状态和属性
createEvent()
getContext()
toDataURL()

1.样式设置：

canvas元素绘制图像的时候有两种方法，分别是

        context.fill()//填充

        context.stroke()//绘制边框

 style: 在进行图形绘制前，要设置好绘图的样式

（1）context.fillStyle//填充的样式

定义和用法

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

默认值：	#000000
JavaScript 语法：	context.fillStyle=color|gradient|pattern;

属性值

值	描述
color	指示绘图填充色的 CSS 颜色值。默认值是 #000000。
gradient	用于填充绘图的渐变对象（线性或放射性）
pattern	用于填充绘图的 pattern 对象

实例 1

定义从上到下的渐变，作为矩形的填充样式：

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

实例 2

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

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

实例 3

用到的图像：

使用图像来填充绘图：

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

（2）context.strokeStyle//边框样式

定义和用法

strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

默认值：	#000000
JavaScript 语法：	context.strokeStyle=color|gradient|pattern;

属性值

值	描述
color	指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。
gradient	用于填充绘图的渐变对象（线性或放射性）
pattern	用于创建 pattern 笔触的 pattern 对象

实例 1

绘制一个矩形。使用渐变笔触：

<span style="font-family: Consolas, 'Courier New', Courier, monospace; white-space: normal; color: rgb(51, 51, 51); font-size: 13px; line-height: 23px;">var c=document.getElementById("myCanvas");</span>
var ctx=c.getContext("<span style="font-family: Consolas, 'Courier New', Courier, monospace;">2d");</span>
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

实例 2

用一个渐变笔触来写文本 "w3school.com.cn"：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.<strong>font</strong>="30px Verdana";
// 创建渐变
var gradient=ctx.<strong>createLinearGradient</strong>(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.<strong>strokeText</strong>("Big smile!",10,50);

（3） context.lineWidth/lineCap/lineJoin/lineLimit  //图形边框宽度,线段样式

lineWidth 属性设置或返回当前线条的宽度，以像素计。

默认值：	1
JavaScript 语法：	context.lineWidth=number;

属性值

值	描述
number	当前线条的宽度，以像素计。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.strokeRect(20,20,80,100);

lineCap 属性设置或返回线条末端线帽的样式。 注释："round" 和 "square" 会使线条略微变长。

默认值：	butt
JavaScript 语法：	context.lineCap="butt|round|square";

属性值

值	描述
butt	默认。向线条的每个末端添加平直的边缘。
round	向线条的每个末端添加圆形线帽。
square	向线条的每个末端添加正方形线帽。

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

lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时。注释：值 "miter" 受 miterLimit 属性的影响。

默认值：	miter
JavaScript 语法：	context.lineJoin="bevel|round|miter";

属性值

值	描述
bevel	创建斜角。
round	创建圆角。
miter	默认。创建尖角。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineJoin="round";
ctx.<strong>moveTo</strong>(20,20);
ctx.<strong>lineTo</strong>(100,50);
ctx.lineTo(20,100);
ctx.<strong>stroke</strong>();

miterLimit 属性设置或返回最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。

提示：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。

边角的角度越小，斜接长度就会越大。

为了避免斜接长度过长，我们可以使用 miterLimit 属性。

如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示（图解 3）：

默认值：	10
JavaScript 语法：	context.miterLimit=number;

属性值

值	描述
number	正数。规定最大斜接长度。 如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。

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

（4） 阴影 context.shadowBlur/shadowColor/shadowOffsetX/shadowOffsetY

shadowColor 属性设置或返回用于阴影的颜色。

注释：请将 shadowColor 属性与 shadowBlur 属性一起使用，来创建阴影。

提示：请通过使用 shadowOffsetX 和 shadowOffsetY 属性来调节阴影效果。

默认值：	#000000
JavaScript 语法：	context.shadowColor=color;

属性值

值	描述
color	用于阴影的 CSS 颜色值。默认值是 #000000。

shadowBlur 属性设置或返回阴影的模糊级数。

默认值：	#000000
JavaScript 语法：	context.shadowBlur=number;

属性值

值	描述
number	阴影的模糊级数

shadowOffsetX/Y 属性设置或返回形状与阴影的水平距离。

shadowOffsetX=0 指示阴影位于形状的正下方。

shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。

shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。

提示：如需调整距离形状的垂直位置，请使用 shadowOffsetY 属性。

默认值：	0
JavaScript 语法：	context.shadowOffsetX=number;

属性值

值	描述
number	正值或负值，定义阴影与形状的水平距离。

 实例：设置矩形阴影

<pre name="code" class="html">var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);

（5）渐变方法 creatLinearGradient()/creatRadialGradient()/addColorStop()

createLinearGradient() 方法创建线性的渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

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

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

JavaScript 语法：

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

参数值

参数	描述
x0	渐变开始点的 x 坐标
y0	渐变开始点的 y 坐标
x1	渐变结束点的 x 坐标
y1	渐变结束点的 y 坐标

createLinearGradient() 方法创建放射状/圆形渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

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

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

JavaScript 语法：

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

参数值

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径

addColorStop() 方法规定 gradient 对象中的颜色和位置。

addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。

注释：您可以多次调用 addColorStop() 方法来改变渐变。如果您不对 gradient 对象使用该方法，那么渐变将不可见。为了获得可见的渐变，您需要创建至少一个色标。

JavaScript 语法：

gradient.addColorStop(stop,color);

参数值

参数	描述
stop	介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color	在结束位置显示的 CSS 颜色值

实例

通过多个 addColorStop() 方法来定义渐变：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

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

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

 颜色的表示方式: 直接用颜色名称:"red" "green" "blue"/十六进制颜色值: "#EEEEFF"/rgb(1-255,1-255,1-255)/rgba(1-255,1-255,1-255,透明度)

（6）模式填充 createPattern()

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

JavaScript 语法：

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

参数值

参数	描述
image	规定要使用的图片、画布或视频元素。
repeat	默认。该模式在水平和垂直方向重复。
repeat-x	该模式只在水平方向重复。
repeat-y	该模式只在垂直方向重复。
no-repeat	该模式只显示一次（不重复）。

2.绘制矩形  

参数值

参数	描述
x	矩形左上角的 x 坐标
y	矩形左上角的 y 坐标
width	矩形的宽度，以像素计
height	矩形的高度，以像素计

 （1）rect(x,y,width,height)

rect() 方法创建矩形。提示：请使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

（2）context.fillRect(x,y,width,height) 

 fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。提示：请使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

（3）strokeRect(x,y,width,height)

strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。提示：请使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。

（4）clearRect(x,y,width,height)

clearRect() 方法清空给定矩形内的指定像素。

实例：

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

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

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

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

绘制 150*100 像素的已填充矩形：

  

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

绘制 150*100 像素的矩形：

<span style="font-size:10px;">var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);</span>

3.绘制路径

（1）开始路径绘制函数 beginPath()----一般放在最前面，创建一个路径其实点，表示将要开始绘制路径

beginPath() 方法开始一条路径，或重置当前的路径,创建一个路径起始点。

提示：请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

（2）绘制路径/填充路径 stroke()/fill()-------一般确定好路径之后使用，进行路径的绘制

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

fill() 方法填充当前的图像（路径）。默认颜色是黑色。 提示：请使用 fillStyle 属性来填充另一种颜色/渐变。

注释：如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

（3）确定路径-----moveTo()/lineTo()/closePath()

注意：canvas画布中，坐标（0,0）在左上角，x轴向下，y轴向右  

context.moveTo(x,y);    //移动路径到坐标（x,y）

context.lineTo(x,y);  //lineTo() 方法添加一个新点(x,y)，然后创建从该点到画布中最后指定点的线条。

context.closePath();   //closePath() 方法创建从当前点到开始点的路径。

context.isPointInPath(x,y);  //isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false。

实例：

绘制一条路径，形状是字母 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.stroke();

绘制一条路径，形式是字母 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();
ctx.fillStyle="green";
ctx.fill();

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

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

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

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

（4）圆弧和曲线的绘制：

二次贝塞尔曲线：---quadraticCurveTo(cpx,xpy,x,y) 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。

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

• 开始点：moveTo(20,20)
• 控制点：quadraticCurveTo(20,100,200,20)
• 结束点：quadraticCurveTo(20,100,200,20)

参数	描述
cpx	贝塞尔控制点的 x 坐标
cpy	贝塞尔控制点的 y 坐标
x	结束点的 x 坐标
y	结束点的 y 坐标

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(cp1x,cp1y,cp2x,cp2y,x,y) 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。

参数	描述
cp1x	第一个贝塞尔控制点的 x 坐标
cp1y	第一个贝塞尔控制点的 y 坐标
cp2x	第二个贝塞尔控制点的 x 坐标
cp2y	第二个贝塞尔控制点的 y 坐标
x	结束点的 x 坐标
y	结束点的 y 坐标

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

• 开始点：moveTo(20,20)
• 控制点 1：bezierCurveTo(20,100,200,100,200,20)
• 控制点 2：bezierCurveTo(20,100,200,100,200,20)
• 结束点：bezierCurveTo(20,100,200,100,200,20)

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

圆弧线：arc(x,y,r,sangle,eangle,counterclockwise) 方法创建弧/曲线（用于创建圆或部分圆）。

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

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

• 中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
• 起始角：arc(100,75,50,0,1.5*Math.PI)
• 结束角：arc(100,7

两切线之间的弧：---arcTo(x1,y1,x2,y2,r) 方法在画布上创建介于两个切线之间的弧/曲线。

参数	描述
x1	弧的起点的 x 坐标
y1	弧的起点的 y 坐标
x2	弧的终点的 x 坐标
y2	弧的终点的 y 坐标
r	弧的半径

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

(4) 剪切画布----clip()

clip() 方法从原始画布中剪切任意形状和尺寸。

提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 剪切矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制绿色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);