1。一致性要求1.1。当调用方法canvasElement.getContext('2d')时，用户代理必须返回一个新的CanvasRenderingContext2D对象。忽略任何其他参数。1.2.二维上下文表示一个平面笛卡尔曲面，原点(0,0)在左上角，坐标空间的x值向右增加，y值向右下降增加。1.3、接口CanvasRenderingContext2D/CanvasDrawingStyles/CanvasPathMethods/CanvasGradient/CanvasPattern/TextMetrics/HitRegionOptions/ImageData:typedef(HTMLImageElementorHTMLVideoElementorHTMLCanvasElement)CanvasImageSource;interfaceCanvasRenderingContext2D{//向后引用画布只读属性HTMLCanvasElementcanvas;//状态voidsave();//将状态压入状态栈voidrestore();//弹出状态栈并恢复状态//变换（默认：变换是单位矩阵）voidscale(unrestricteddoublex,unrestricteddoubley);无效旋转（不受限制的双角度）；无效翻译（不受限制的双x，不受限制的双y）；voidtransform(无限制双a,无限制双b,无限制双c,无限制双d,无限制双e,无限制双f);voidsetTransform(无限制双a,无限制双b,无限制双c,unres受限双d，无限制双e，无限制双f）；//合成属性unrestricteddoubleglobalAlpha;//（默认值：1.0）属性DOMStringglobalCompositeOperation；//（默认：“source-over”）//颜色和样式（另请参见CanvasDrawingStyles接口）属性（DOMString或CanvasGradient或CanvasPattern）strokeStyle；//（默认值：“黑色”）属性（DOMString或CanvasGradient或CanvasPattern）fillStyle；//（默认值：“黑色”）CanvasGradientcreateLinearGradient(doublex0,doubley0,doublex1,doubley1);CanvasGradientcreateRadialGradient(doublex0,doubley0,doubler0,doublex1,doubley1,doubler1);CanvasPatterncreatePattern（CanvasImageSource图像，[TreatNullAs=EmptyString]DOMString重复）；//阴影属性不受限制doubleshadowOffsetX;//(default:0)属性不受限制doubleshadowOffsetY;//（默认值：0）在致敬无限制的双阴影模糊；//（默认值：0）属性DOMStringshadowColor；//（默认值：“透明黑色”）//rectsvoidclearRect(unrestricteddoublex,unrestricteddoubley,unrestricteddoublew,unrestricteddoubleh);voidfillRect(无限制双x,无限制双y,无限制双w,无限制双h);voidstrokeRect(无限制双x,无限制双y,无限制双w,无限制双h);//路径API（另见CanvasPathMethods）voidbeginPath();空填充（）；空行程（）；voiddrawFocusIfNeeded(元素元素);空剪辑（）；布尔isPointInPath（无限制双x，无限制双y）；//文本（另见CanvasDrawingStyles接口）voidstrokeText(DOMStringtext,unrestricteddoublex,unrestricteddoubley,optionalunrestrictedd双最大宽度）；TextMetrics测量文本（DOMString文本）；//绘制图像voiddrawImage(CanvasImageSourceimage,unrestricteddoubledx,unrestricteddoubledy);voiddrawImage(CanvasImageSourceimage,无限制双dx,无限制双dy,无限制双dw,无限制双dh);voiddrawImage(CanvasImageSource图像,不受限制的双sx,不受限制的双sy,不受限制的双sw,不受限制的双sh,不受限制的双dx,不受限制的双dy,不受限制的双dw,不受限制的双dh);//命中区域voidaddHitRegion(HitRegionOptionsoptions);voidremoveHitRegion(DOMStringid);voidclearHitRegions();//像素操作ImageDatacreateImageData(unrestricteddoublesw,unrestricteddoublesh);ImageDatacreateImageData(ImageData图像数据);ImageDatagetImageData（双sx，双sy，双sw，双sh）；voidputImageData(ImageDataimagedata,doubledx,doubledy);voidputImageData(ImageDataimagedata,doubledx,doubledy,doubledirtyX,doubledirtyY,doubledirtyWidth,doubledirtyHeight);};CanvasRenderingContext2D实现CanvasDrawingStyles;CanvasRenderingContext2D实现CanvasPathMethods;[NoInterfaceObject]interfaceCanvasDrawingStyles{//linecaps/joins属性不受限制的doublelineWidth;//（默认值：1）属性DOMStringlineCap；//"butt","round","square"(default:"butt")属性DOMStringlineJoin;//"round","bevel","miter"(default:"miter")属性不受限制doublemiterLimit;//（默认值：10）//虚线voidsetLineDash(sequencesegments);//（默认值：空）sequencegetLineDash();属性不受限制的双线DashOffset；//文本属性DOMStringfont;//（默认值：“10pxsans-serif”）属性DOMStringtextAlign；//“开始”、“结束”、“左边”","right","center"(default:"start")属性DOMStringtextBaseline;//"top","hanging","middle","alphabetic","ideographic","bottom"(default:"alphabetic")};[NoInterfaceObject]interfaceCanvasPathMethods{//共享路径API方法voidclosePath();voidmoveTo(unrestricteddoublex,unrestricteddoubley);voidlineTo(unrestricteddoublex,unrestricteddoubley);voidquadraticCurveTo(unrestricteddoublecpx,无限制双cpy,无限制双x,无限制双y);voidbezierCurveTo(无限制双cp1x,无限制双cp1y,无限制双cp2x,无限制双cp2y,无限制双x,无限制双y);voidarcTo(无限制双x1,无限制双y1，无限制双x2，无限制双y2，无限制双半径）；voidrect（无限制双x，无限制双y，无限制双w，无限制双h）；voidarc（无限制双x，不受限制的双y，不受限制的双半径，不受限制的双startAngle，不受限制的双endAngle，可选布尔逆时针=false）；};interfaceCanvasGradient{//不透明对象voidaddColorStop(doubleoffset,DOMStringcolor);};interfaceCanvasPattern{//不透明对象};interfaceTextMetrics{readonlyattributedoublewidth;};dictionaryHitRegionOptions{//允许扩展的字典在CanvasContext2DLevel2中点击区域DOMStringid="";//对于控制支持的区域：Element?control=null;};interfaceImageData{readonlyattributeunsignedlongwidth;只读属性无符号长高度；readonlyattributeUint8ClampedArraydata;};提示：context.canvas返回canvas元素2、canvas的状态2.1、每个上下文都维护一系列绘图状态绘图状态包括：当前变换矩阵、当前裁剪区域，以及：strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation、font、textAlign、2、textBaseline.2。save()：将当前绘图状态的副本推送到绘图状态堆栈。2.3.context.restore()：返回绘图状态堆栈最后推送的绘图状态。如果之前没有保存状态，则什么都不做提示：当前路径和当前位图不是绘图状态的一部分。当前路径是持久的，只能使用beginPath()方法重置。当前位图是画布的属性，而不是上下文。3.线条样式context.lineWidth[=value]返回当前线条的宽度，可以设置新值。小于或等于0或无穷大的值将被忽略。context.lineCap[=value]返回当前行顶部的样式，可以通过设置新值来修改。值只能是“butt”、“round”和“square”（“butt”、“round”和“square”），其他值将被忽略。context.lineJoin[=value]返回行连接方法，你可以设置一个新值。值只能是“bevel”、“round”和“miter”（“斜角”、“圆”和“斜接”），其他值将被忽略。context.miterLimit[=value]返回两条线相交处的内角和外角之间的距离，可以设置。小于或等于0或无穷大的值将被忽略。参考canvas_miterlimitcontext.setLineDash(segments)设置线段交替绘制和间距。参数是一个数组。如果数组元素个数为奇数，则数组元素被复制一次。例如[5,10,15]变成[5,10,15,5,10,15]。参考CanvasRenderingContext2Dsegments=context.getLineDash()返回当前交替绘制的线段和间距的副本。context.lineDashOffset[=value]偏移量的浮点数。最初为0.0。无穷大的值将被忽略。（效果类似svg的offset实现画线）4.文字样式context.font[=value]返回当前字体设置，可以修改。语法与CSS'font'属性相同；无法解析为CSS字体值的值将被忽略。相对关键字和长度是相对于画布元素的字体计算的。context.textAlign[=value]返回当前文本对齐设置，可以修改。可能的值是“开始”、“结束”、“左”、“右”和“中心”。其他值忽略不计，初始值为“start”。context.textBaseline[=value]返回文本的基线，可以修改。默认值为“字母”。可能值：“top”、“hanging”、“middle”、“alphabetic”、“ideographic”、“bottom”5.绘图路径5.1、路径和子路径：a．每个实现CanvasPathMethods接口的对象都有一个路径。b.一条路径可以有0个或多个子路径。C。每个子路径包含一个或多个点的列表，由直线或曲线连接，以及一个指示子路径是否闭合的标志。d.绘制路径时忽略少于两个点的子路径。e.在实现CanvasPathMethods接口的对象时，其路径的子路径必须初始化为0。f．如果对象的路径没有子路径，则closePath()方法不执行任何操作。否则，它必须将最后一个子路径标记为已关闭，创建一个与前一个子路径具有相同第一个点的新子路径，最后将这个新子路径添加到路径中。5.2.如果要使用矩阵变换，则必须在向路径添加点或线之前使用变换。5.3.api:context.moveTo(x,y)使用给定的x,y创建一个新的子路径。(OriginalCreatesanewsubpathwiththegivenpoint.)context.closePath()将当前子路径标记为已关闭，并以当前点为起点开始一个新子路径。context.lineTo(x,y)将给定点添加到当前子路径，用一条线连接前一个点。context.quadraticCurveTo(cpx,cpy,x,y)将给定点添加到当前子路径，用二次贝塞尔曲线连接前一个点。context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)将给定点添加到当前子路径，用贝塞尔曲线连接前一个点。context.arcTo(x1,y1,x2,y2,radius)的参数为：（圆弧起点X，圆弧起点Y，圆弧终点X，圆弧终点Y，圆弧半径）。A。如果点(x0,y0)等于点(x1,y1)，或者点(x1,y1)等于点(x2,y2)，或者如果半径为零，则该方法必须添加点(x1,y1))到子路径，并将此点与前一点(x0,y0)用直线连接起来。b.如果以上三点在一条直线上，则将X2/y2加入子路径，与X0/Y0相连。context.arc(x,y,radius,startAngle,endAngle[,counterclockwise])参数为(rx,ry,radius,起点弧,终点弧,falseclockwise/truecounterclockwise)。默认为顺时针，见1.3。If(counterclockwise===false)&&(endarc-startarc>=2Math.PI)||(counterclockwise===true)&&(startarc-endarc>=2Math.PI)然后弧就是完整的圆周。弧度=角度*(Math.PI/180)。如果给定的半径小于0，将抛出IndexSizeError异常。context.rect(x,y,w,h)向路径添加一个新的闭合子路径，代表给定的矩形。再次注意：当前路径是持久化的，只能使用beginPath()方法进行重置。待续。.....
