canvas快速入门（五）canvas变形

canvas变形

canvas变形主要分为三部分

1. 平移 ctx.translate(200,200);
2. 旋转 ctx.rotate(Math.PI/180*45);
3. 缩放 ctx.scale(0.5,0.5);

---

下面是一些小案例及功能演示

平移（ctx.translate()）

这里先介绍一下入栈和出栈

• 入栈 : ctx.save() 首先将结果进行保存
• 出栈 ：ctx.restore() 将刚刚存取的红色拿出来对第三个设置为红色

    //绘制三个等同的矩形块
    ctx.fillStyle="red"; 
    // 出栈只有一次 ，入栈和出栈必须以一对应 
    //入栈 首先将结果进行保存
    ctx.save();
    ctx.fillRect(0,0,100,100);
    ctx.fillStyle="green";
    ctx.fillRect(200,0,100,100);
    //出栈 将刚刚存取的红色拿出来对第三个设置为红色
    ctx.restore();
    ctx.fillRect(400,0,100,100);

通过上述代码可以得出红绿红的三个方块

下面通过使用translate实现横向排列多个间距相同的矩形

 for(var i=0;i<6;i++){
        // 储存00坐标点
        ctx.save();
        ctx.fillStyle="red";
        ctx.strokeStyle="#000000";
        // 平移
        ctx.translate(50*i,0);
        ctx.fillRect(0,0,50,50);
        ctx.strokeRect(0,0,50,50);
        ctx.restore();
        // 将坐标恢复到00
    } 

旋转 (ctx.rotate())

参数： 弧度
注意：

• 旋转时，旋转的是画布
• 平移旋转结合使用时 ，先平移再旋转

 //使用入栈出栈，可以让它重新回到00位置 不使用则叠加
    ctx.save();
    ctx.fillStyle="red";
    ctx.translate(200,200); 
    // 旋转  旋转时，旋转的是画布
    ctx.rotate(Math.PI/180*45);
    ctx.fillRect(-50,-50,100,100);
    ctx.restore();
    ctx.fillStyle="blue"; 
    // 先平移再旋转
    ctx.translate(100,100); 
    ctx.rotate(Math.PI/180*45);     
    ctx.fillRect(-50,-50,100,100);
    ctx.fillStyle="red";

缩放 ctx.scale()

注意

• 这里的缩放也是针对画布而言的
• 先缩小再挪动 和 先挪动再缩小是两回事

    ctx.scale(0.5,0.5);
    ctx.translate(200,200); 
    ctx.rotate(Math.PI/180*45);     
    ctx.fillRect(-50,-50,100,100);

总结：

在画布中不管缩放，挪移，旋转都是对整个桌面的，所以每次操作完成要出栈初始内容，这样可以更为愉快的操作画布