‘repeat’);
参数 img 也可以是另一个 canvas 或 video
☆ context.scale(xMultiple, yMultiple)
两个参数分别指定对象在x和y方向上以后的绘制缩放倍数,大于1
为放大,0和1之间为缩小。若为负值,则可以实现倒影、翻转等效果
。
☆ context.rotate(angle)
用于旋转绘图环境context,以当前坐标原点为按转中心,以弧度
为单位,结合使用Math.PI。参数 angle 为正值时为顺时针旋转,为
负值时按逆时针旋转。
☆ context.transform(ScaleX, skewY, skewX, ScaleY, transX,
transY)
该函数用于控制绘图对象的大小和切变和位置,是一种变换矩阵
。ScaleX 和 ScaleY 分别 x 和 y 坐标的缩放。skewY是控制
context的垂直切变,其值可以为任意大小的正负浮点或整型,相当
于对纵坐标进行y’= y + skewY * x。skewX是控制context的水平切
变,其值可以为任意大小的正负浮点或整型,相当于对横坐标进行
x’= x + skewX * y。最后两个参数的作用相当于translate(x, y)中
两个参数的作用。
☆ context.setTransform(ScaleX, skewY, skewX, ScaleY,
transX, transY)
该方法类似于transform,但是transform方法会与之前已经应用
过的transform、scale、rotate方法效果复合,产生复杂的复合变换
效果。setTransform方法则会从context原始的状态应用变换,不会
与之前的变换复合。因此常用context.setTransform(1, 0, 0, 1,
0, 0)将context的变换状态恢复到其原始值。
☆ fillText (text, x, y, maxwidth)
在(x, y)坐标处绘制填充内容为text的文本。maxwidth是可选参
数,用于限制所有文本的宽度和文本间距总和的大小,若所有和间距
的宽度超出这个值,则单个文本字符与字符间距的宽度都会被压缩,
单个字符变得细长,间距变小。可以结合context.font、
context.fillStyle、context.textAlign等属性绘制填充文本。
☆ strokeText (text, x, y, maxwidth)
在(x, y)坐标处绘制路径内容为text的文本。maxwidt是可选参
数,用于限制所有文本的宽度和文本间距总和的大小,若所有和间距
的宽度超出这个值,则单个文本字符与字符间距的宽度都会被压缩,
单个字符变得细长,间距变小。可以结合context.font、
context.textAlign、context.lineWidth、context.strokeStyle等
属性绘制路径文本。
例如:
复制代码
var fontSize = 100;
context.font = fontSize + “px Arial”;
while(context.measureText(“Hello world!”).width > 140)
{
fontSize–;
context.font = fontSize + “px Arial”;
}
context.fillText(“Hello world!”, 10, 10);









