二：Canvas绘图（上）一、概述Canvas具有强大的绘图功能，可以通过Javascript控制其context对象进行绘图。2.基本矩形在Canvas上绘制基本矩形有填充、描边、清空三种方式。三个API如下：fillRect(x,y,width,height);在位置(x,y)绘制一个填充的矩形，宽度和高度为高度。strokeRect(x,y,宽度,高度);在位置（x，y）绘制一个矩形边框，宽度和高度为高度，需要使用当前的strokeStyle、lineWidth、lineJoin和miterLimit设置。clearRect(x,y,宽度,高度);在x,y位置，宽为width，高为height，清空指定区域，使其完全透明。然后绘制几个矩形，代码如下：functionrect(x,y,w,h){context.lineWidth=2;context.strokeStyle='#000000';context.strokeRect(x,y,w,h);}函数manyrect(){vari=0,j=0;做{rect(i,j,250-4*i,250-4*j);我=我+5;j=j+5；}而（我<=125）；context.fillStyle='#000001';显示结果如下：3.Canvas状态在Canvas上下文中绘图时，可以使用所谓的绘图堆栈状态。每个状态始终存储Canvas上下文数据。下面是状态栈中存储的数据列表：变换矩阵信息。当前裁剪区域。画布属性的当前值。当前路径和当前位图由Canvas上下文控制，而不是保存状态。有两种方法可以压入和弹出绘图状态，如下所示：context.save()//将当前状态保存到堆栈中。context.restore()//调出上次存储的栈，恢复画布。4.使用路径创建线段路径可以用来在画布上绘制任何形状。路径是一系列点和它们之间的线。画布上下文只能有一个“当前”路径，当调用context()方法时，该路径不会作为当前绘图状态的一部分存储。路径的上下文是一个重要的概念，它决定了只能变换画布上的当前路径。调用beginPath()函数开始路径，调用closePath()函数结束路径。基本路径由以下两个方法控制：moveTo()lineTo()线还可以设置不同的属性，如下：lineCap属性。定义上下文中直线的端点，可以有以下三个值。屁股。默认情况下，端点是垂直于线段边缘的平面边缘。圆形的。端点是以线宽为线段边缘直径的半圆。正方形。端点是选区边缘的矩形，它们的长度与线宽一样长，宽度是线宽的一半。lineJoin属性。定义在两条线相交处创建的角，称为连接。在连接处创建一个填充三角形，其基本属性可以使用lineJoin设置。斜接。默认情况下，边会延伸以在连接处相遇。miterLimit是拐角长度和线宽之间允许的最大比率（默认值为10）。斜角。交界处是对角斜面。圆形的。交界处是一个圆圈。linewidthlineWidth定义线条的宽度（默认为10）。笔划样式strokeStyle定义线条和形状边框的颜色和样式。画一条简单的直线，代码如下：functionline(){context.lineWidth=10;context.beginPath();context.moveTo(0,0);context.lineTo(100,0);context.lineTo(100,100);context.stroke();context.closePath();}显示结果如下：5.圆弧和曲线（补充）画圆弧有两个函数，如下：context,arc(x,y,radius,startAngle,endAngle,anticlockwise);x,y定义圆心的位置，radius定义圆弧的半径。startAngele和endAngle使用弧度值而不是角度值。anticlockwise这两个值可以是true或false，用来定义圆弧的方向。context.arcTo(x1,y1,x2,y2,radius);只有部分最新的浏览器支持arcTo方法，该函数绘制给定半径的圆弧，圆弧的起点和当前路径的位置(x1,y1点的直线)与该点相切，圆弧的终点与点(x1,y1)到(x2,y2)的直线相切。context.arcTo方法要求当前路径至少有一个子路径。贝塞尔曲线比圆弧灵活得多。它有立方和正方形两种形式，如下：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);context.quadraticCurveTo(cpx,cpy,x,y);Canvas裁剪区域：结合save()函数和restore函数，Canvas裁剪区域可以限制路径及其子路径的绘图区域。首先通过rect()函数设置一个用于绘制的矩形区域，然后调用clip()函数将rect()函数定义的区域设置为裁剪区域。裁剪区域可以理解为绘图操作的掩码。
