zoukankan      html  css  js  c++  java
  • HTML5 canvas中的转换方法

    转换方法
    scale(scalewidth,scaleheight)                缩放当前绘图至更大或更小
    scalewidth         缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
    scaleheight         缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)

    rotate(angle)                旋转当前绘图
    angle         旋转角度,以弧度计。
                    如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。
                    举例:如需旋转 5 度,可规定下面的公式:5*Math.PI/180。

    translate(x,y)                重新映射画布上的 (0,0) 位置
    x         添加到水平坐标(x)上的值
    y         添加到垂直坐标(y)上的值


    transform(a,b,c,d,e,f)        替换绘图的当前转换矩阵

    a         水平缩放绘图
    b         水平倾斜绘图
    c         垂直倾斜绘图
    d         垂直缩放绘图
    e         水平移动绘图
    f         垂直移动绘图


    setTransform(a,b,c,d,e,f)        将当前转换重置为单位矩阵。然后运行 transform()

    a         水平旋转绘图
    b         水平倾斜绘图
    c         垂直倾斜绘图
    d         垂直缩放绘图
    e         水平移动绘图
    f         垂直移动绘图

        <canvas id="f" width="500" height="450" style="border:1px solid #000"></canvas>
        <script type="text/javascript">
        var a=document.getElementById("f");
        var ctx=a.getContext("2d");
        ctx.strokeRect(20,20,30,30);
        ctx.scale(2,2);                                        //缩放当前绘图至更大或更小
        ctx.strokeRect(20,20,30,30);
    
        ctx.fillRect(120,20,30,20);
        ctx.translate(30,30);                        //重新映射画布上的 (0,0) 位置
        ctx.fillRect(120,20,30,20);
    
        //缩放当前绘图至更大或更小
        ctx.rotate(25*Math.PI/180);               
        ctx.fillRect(50,50,100,10);
    
        ctx.fillStyle="green";
        ctx.fillRect(20,50,10,20);
        ctx.transform(2,0.5,-0.5,2,50,0);//替换绘图的当前转换矩阵
        ctx.fillStyle="red";
        ctx.fillRect(20,50,10,20);
    
        ctx.fillStyle="yellow";
        ctx.fillRect(0,0,50,20)
    
        ctx.setTransform(1,0.5,-0.5,1,30,10);//将当前转换重置为单位矩阵。然后运行 transform()
        ctx.fillStyle="red";
        ctx.fillRect(0,0,50,20);
    
        ctx.setTransform(1,0.5,-0.5,1,30,10);
        ctx.fillStyle="blue";
        ctx.fillRect(0,0,50,20);
        </script>
    

     

  • 相关阅读:
    编译内核时出现drivers/mfd/mxchdmicore.c:36:24: fatal error: mach/clock.h: No such file or directory
    IE中iframe标签显示在DIV之上的问题解决方案
    Linux驱动学习1.hello world;
    Maven安装与配置(转)
    Jmeter阶梯式压测
    Jmeter的分布式测试
    adb connect命令连接多个Android设备
    Linux当中文件的显示命令
    软件测试流程
    测试时间不够,该怎么办?
  • 原文地址:https://www.cnblogs.com/ricesm/p/5067017.html
Copyright © 2011-2022 走看看