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的宽度高度)