context.fillText(“Font size is ” + fontSize + “px”, 10, 50);
☆ context.measureText("text")
该方法根据当前font, textAlign, 和 textBaseline 的值计算
文本所占区域的大小。text 参数是用于绘制的文本内容。该方法
返回一个 TextMetrics 对象,目前,TextMetrics 对象仅有一个
width 属性,将来可能提供更多属性。
☆ context.rect(x, y, w, h)
在点(x, y)处绘制宽w,高h的矩形。当前点被忽略。但矩形绘制
完后(x, y)成为新的当前点。
☆ context.arc(x, y, radius, startAngle, endAngle,
anticlockwise)
绘制圆弧。x, y是圆弧所在圆心坐标;radius是圆弧半径;
startAngle,endAngle分别是起始弧度和终止弧度,以弧度为单位,
圆周率π用Math.PI表示,值为0的弧度是水平向右的;anticlockwise
表示绘制弧度的方向,是可选参数,布尔值,true为逆时针,false
为顺时针,默认为false。使用该方法可以省略lineTo方法。在使用
该方法绘制一段圆弧后,接下来的路径绘制会从圆弧的结束端点开始
。
☆ context.arcTo(x1, y1, x2, y2, radius)
当前点与(x1, y1)形成一条线L1,(x1, y1)与(x2, y2)形成另一
条线L2,当前点与(x2, y2)形成第三条线L3。若以(x1, y1)为原点,
L1和L2为坐标轴,与L1和L2相切的,半径为radius,且与“线段”L3在
同一象限的圆O1上,设与L1的切点为p1,与L2的切点为p2。圆O1上p1
与p2间有两段弧线,里原点(x1, y1)较近的一段弧(也是圆上较短的
一段弧)为所绘制的弧线。
另外,当前点与(x1, y1)之间也会绘制出一条线段与弧线相连接
,因为路径绘制是连续的,当前点与(x1, y1)之间的线段先绘制,紧
接着绘制弧线。切点p2成为下一个当前点。
该方法常用于绘制圆角矩形。
☆ context.quadraticCurveTo(x1, y1, x2, y2)
在当前坐标与(x2, y2)绘制一条二次贝塞尔曲线段,弯曲度由
(x1, y1)控制。(x1, y1)不在曲线段上。
Other options for curves in the HTML5 Canvas API include
the bezierCurveTo, arcTo, and arc functions. These curves
take additional control points,a radius, or angles to
determine the characteristics of the curve.
☆ context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
在当前点与(x, y)间绘制由控制点(cp1x, cp1y)和(cp2x, cp2y)
控制弯曲度的三次贝塞尔曲线。
☆ context.clip()
这个方法将根据上一次所绘制的闭合路径创建一个剪辑区域
(clip region)。剪辑区域相当于一个蒙版,以后绘制的内容仅
落在剪辑区域内的部分才会被显示。
☆ context.isPointInPath(x, y)
检测坐标(x, y)是否在已绘制的路径内。返回值为 true 或
false。
☆ canvas.toDataURL(type, args)









