zoukankan      html  css  js  c++  java
  • (四)旋转 缩放 位移 保存状态

    旋转

    rotate(10) //围绕原点旋转

        var canvas = document.getElementById("canvas");
        if(canvas.getContext){
            var ctx = canvas.getContext("2d");
            ctx.beginPath();
            ctx.translate(200,200);
            ctx.arc(0,0,100,0,2*Math.PI,false);
            ctx.moveTo(94,0);
            ctx.arc(0,0,94,0,2*Math.PI,false);
            ctx.moveTo(0,0);
            ctx.lineTo(0,-90);
            
            //围绕圆点旋转
            ctx.rotate(10);
            
            ctx.moveTo(0,0);
            ctx.lineTo(-90,0);
    
            ctx.stroke();
            ctx.closePath();
        }

    缩放

    scale(2,2)  //在原图形的基础上 *2  x 周对应第一个参数 y轴对应第二个参数

    var canvas = document.getElementById("canvas");
        if(canvas.getContext){
            var ctx = canvas.getContext("2d");
    
            ctx.beginPath();
    
            ctx.translate(100,100);//位移
            ctx.rotate(0.5);//旋转
            ctx.scale(1.5,1.2)//围绕圆点缩放x轴1.5倍,y轴1.2倍
    
            ctx.fillStyle = "blue";
            ctx.fillRect(0,0,200,100);
            ctx.stroke();
            ctx.closePath();
        }

    位移

    translate(x,y)  //把原点移动到xy的地方

    var canvas = document.getElementById('canvas');
        if(canvas.getContext){
            var ctx = canvas.getContext("2d");
            ctx.beginPath();
            ctx.translate(200,200);//移动圆点到 200,200 的位置
    
            ctx.arc(0,0,100,0,2*Math.PI,false);
    
            ctx.moveTo(94,0);
            ctx.arc(0,0,94,0,2*Math.PI,false);
    
            ctx.moveTo(0,0);
            ctx.lineTo(0,-90);
            ctx.moveTo(0,0);
            ctx.lineTo(-80,0);
    ctx.stroke(); ctx.closePath(); }

    保存状态

    save()  //调用这个方法会把所有设置都保存到一个栈结构里,不影响下文,可以多次一级一级保存

    restore()  //调用这个方法会恢复相对应save()方法保存的设置,可以多次一级一级恢复

    var canvas = document.getElementById("canvas");
        if(canvas.getContext){
            var ctx = canvas.getContext("2d");
            ctx.beginPath();
            
            ctx.fillStyle = "red";
            ctx.save();//保存红色 一级
            
            ctx.fillStyle = "green";
            ctx.save();//保存绿色 二级
            
            ctx.restore();//恢复绿色 二级
            ctx.fillRect(50,50,100,50); //绿色
            
            ctx.restore();//恢复红色 一级
            ctx.fillRect(100,100,100,50);//红色
            
            ctx.stroke();
            ctx.closePath();
        }
  • 相关阅读:
    JMeter压力测试并发测试(入门篇)
    System.currentTimeMillis()的性能问题以及解决方法
    Java日期时间API系列4-----Jdk7及以前的日期时间类的线程安全问题【转】
    使用Apache Commons Chain
    Spring中的InitializingBean接口的使用[转]
    Hash环/一致性Hash原理【转】
    ASP.NET Core 进程内模型和进程外模式
    如何运行多个同名Windows服务实例
    WPF系列 —— 控件添加依赖属性
    WPF系列——简单绑定学习
  • 原文地址:https://www.cnblogs.com/chefweb/p/6046458.html
Copyright © 2011-2022 走看看