• HTML5 Cavans(5) 平移 缩放 旋转


    translate平移,接受2个参数,分别是x和y轴平移位置,平移的是绘图原点,之后绘图的原点就是平移后的位置,之前的图位置不变

    scale 缩放,接受2个参数,分别是x和y缩放系数,1是原来大小,也是对之后绘图影响,之前图没影响

    rotate旋转,参数是旋转度数,顺时针

                var cancans = document.getElementById("myCanvas");
                //得到2D渲染上下文
                var context = document.getElementById("myCanvas").getContext("2d");
    
                context.save()//保存状态,以便恢复
                //平移
                context.fillRect(0, 0, 50, 50);
    
                context.translate(100, 100);
                context.fillRect(0, 0, 50, 50);
    
                context.translate(100, 100);
                context.fillRect(0, 0, 50, 50);
    
                context.fillStyle = "red";
    
                //平移缩放结合
                context.translate(100, 100); //当前绘图原点(300,300)
                context.scale(1, 2); //x坐标不缩放,y坐标变成2倍
                context.fillRect(0, 0, 50, 50);
    
                context.restore()//恢复状态,将绘图原点重置
                context.fillStyle = "blue";
                context.fillRect(0, 0, 25, 25);
    
                //旋转45度,默认是顺时针
                context.translate(100, 100);
                context.rotate(Math.PI / 4);
                context.fillRect(50, 50, 50, 50);
  • 相关阅读:
    CodeForcesGym 100524A Astronomy Problem
    ZOJ 2567 Trade
    HDU 3157 Crazy Circuits
    CodeForcesGym 100212E Long Dominoes
    UVALive 6507 Passwords
    [转]
    java socket
    Spark RDD Operations(2)
    Spark cache 和 persist
    vim 基础命令
  • 原文地址:https://www.cnblogs.com/FlyCat/p/2580361.html
Copyright © 2020-2023  润新知