h5--canvas2

1.ctx.rotate(阿尔法旋转角度)旋转坐标原点。

ctx.rotate(Math.PI*(2/4+i/4))

 

应用：画旋转小伞。

2.scale(a,b)缩放图形：a:x轴缩放因子，b：y轴缩放因子。放大因子大于1，缩小因子小于1.

ctx.scale(0.95,0.95);

旋转缩小的蓝色透明度为0.4圆球：

3.teansform矩阵变换：用于坐标变化不能达到效果时：

组合图形：

 

4.gobalAlpha:透明度

context.gobalCompositeoperation="source-over"两个图形的相交方式

a.  context.gobalCompositeoperation="source-over";默认设置--新可以覆盖原本

 

b：改变透明度：gobalAlpha：

5.clip()裁切路径

 

6.应用不同的线形

b.端点：

c.连接处

d.mitter相交处：

7.绘制线性渐变：

createLinearGradient（x1,y1,x2,y2）

上色

ColorStop(position,color)

8.绘制径向渐变：creatRadialGradient(x1,y1,x2,y2,r2)

类似于灯光照射效果

9.createPattern填充图案：（image，type）

 

10.设置透明度：除了gobalAphla（批量设置相同透明度）之外好有一种方法

rgba(r,g,b,a)最后一个值是aphla 0~1之间的浮点数

可以看到红颜色慢慢淡了很多：

11.创造阴影：

12.填充字体：context.fillText(text,x,y,[maxWidth])   内容，横纵坐标绘制填充文字

font（）里面写字体格式。

13.绘制轮廓字体strokeText：使用与上面类似。

14.测量文字宽度measureText(字符串):

15.drawImage引入图像的方法（4种用处之一）：drawImage

 

 

16.drawImage()改变图像大小:

ctx.drawImage(img,0,0,400,400);

17.创建图像切片

(1.图片，2.3.图片切片起始坐标，4.5.图片切片的宽高，6.7放在目标canvas的起点坐标，8,9放在目标canvas的宽度高度)