2.cavas基础(2)

8. 状态的保存和恢复

save()restore()
Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括：

• 当前应用的变形（即移动，旋转和缩放）
• strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值
• 当前的裁切路径（clipping path）

你可以调用任意多次 save 方法，每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复

    ctx.fillRect(0,0,150,150);
    ctx.save();

    ctx.fillStyle = '#09F'      
    ctx.fillRect(15,15,120,120); 

    ctx.save();                
    ctx.fillStyle = '#FFF'       
    ctx.globalAlpha = 0.5;    
    ctx.fillRect(30,30,90,90);   

    ctx.restore();               
    ctx.fillRect(45,45,60,60);   

    ctx.restore();              
    ctx.fillRect(60,60,30,30);  

image.png

9. 变形

注意：在变形之前最好保存初始状态，便于恢复

translate(x, y)
它用来移动 canvas 和它的原点到一个不同的位置

ctx.translate(20,20)

image.png

rotate(angle)
以原点为中心旋转 canvas,旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值

    ctx.rotate(Math.PI / 180 * 20)

image.png

scale(x, y)
增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大,scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值

   ctx.scale(0.8,1.2)

image.png

transform(m11, m12, m21, m22, dx, dy)
将当前的变形矩阵乘上一个基于自身参数的矩阵

image.png

m11：水平方向的缩放
m12：水平方向的倾斜偏移
m21：竖直方向的倾斜偏移
m22：竖直方向的缩放
dx：水平方向的移动
dy：竖直方向的移动

ctx.setTransform(-1, 0, 0, 1, 100, 100)

image.png

resetTransform()
重置当前变形为单位矩阵

10. 图形组合

globalCompositeOperation=type

source-over（默认值）:现有画布上下文之上绘制新图形
source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色
source-out:只显示新图形非交集部分
source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色
destination-over:在原有图形下绘制新图形
destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色
destination-out:只显示原有图形非交集部分
destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色
lighter:原有图形和新图形都显示，交集部分做颜色叠加
xor:重叠飞部分不现实
copy:只显示新图形
screen:滤色

可以结合网上图片理解 image.png

11. 裁切路径

cli() 将当前正在构建的路径转换为当前的裁剪路径。
裁切路径和普通的 canvas 图形差不多，不同的是它的作用是遮罩，用来隐藏不需要的部分

    ctx.arc(100,100,100,0,Math.PI * 2,false);
    ctx.fillStyle = 'pink';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(150,150,100,0,Math.PI * 2, false);
    ctx.fillStyle = 'blue';
    ctx.fill();

image.png

裁切之后：

    ctx.arc(100,100,100,0,Math.PI * 2,false);
    ctx.fillStyle = 'pink';
    ctx.fill();
    ctx.clip();

    ctx.beginPath();
    ctx.arc(150,150,100,0,Math.PI * 2, false);
    ctx.fillStyle = 'blue';
    ctx.fill();

image.png