zoukankan      html  css  js  c++  java
  • canvas基础—图形变换

    1、canvas转换方法

    1.1canvas转换方法

    二、canvas实现图形的中心点旋转

    step1:获取canva元素并指定canvas的绘图环境

        var canvas=document.getElementById('canvas');
        var context=canvas.getContext('2d');

    step2:在画布(100,100)的位置绘制一个100*100的矩形

    context.fillRect(100,100,100,100);

    step3:要实现图片的中心旋转,首先我们需要将画布的(0,0)位置移到绘制的矩形的中心点的位置,(即图中(150,150)位置为(0,0)位置),并且以新的圆点为坐标,绘制一个一样大的矩形。如图(为了形象理解,下图是在软件中绘制出来的,在颜色上做了个区分,实际代码里并没有区分颜色,图中(150,150)位新的坐标原点)

    context.translate(150,150);
    context.fillRect(0,0,100,100);

     step4:接下来我们将矩形旋转45度角(备注:在canvas中,旋转,平移都需要在矩形绘制之前执行),所以接下来我们将代码改成下图所示:

    context.fillRect(100,100,100,100);
    context.translate(150,150);
    context.rotate(90*Math.PI/180);
    context.fillRect(0,0,100,100);
    
    

    step5:此时的圆点位置在(150,150)的位置,我们需要将圆点位置还原成(100,100)的位置,也就是需要向左平移50个像素,向上平移50个像素,如下代码

    context.fillRect(100,100,100,100);
    context.translate(150,150);
    context.rotate(90*Math.PI/180);
    context.translate(-50,-50)
    context.fillRect(0,0,100,100);

     

     总结:用canvas实现中心旋转,主要有以下几步

    1. 第一步:确定中心点

       图形的坐标圆点的x轴/y轴+(图形的宽度/高度/2);

       例如:上述例子中,矩形的圆点坐标为(100,100),矩形的宽高为(100,100);那么圆点的位置则为(100+100/2,100+100/2),即(150,150)

       2.第二步:将画布的原点移到中心点的位置

       3.第三步:旋转

       4.第四步:将画布的原点移动到图形的原点位置

       5.第五步:以新的原点为图形的原点坐标,开始绘制图形

  • 相关阅读:
    HTTP常用的动词
    mysql5.7安装与主从复制
    Linq to XML 之XElement的Descendants方法的新发现
    SQL中的内连接外连接和交叉连接是什么意思?
    LINQ TO SQL ——Group by
    分布式Web服务器架构
    基于socket的客户端和服务端聊天机器人
    linq to sql (Group By/Having/Count/Sum/Min/Max/Avg操作符)
    关于301、302、303重定向的那些事
    手写async await的最简实现
  • 原文地址:https://www.cnblogs.com/Anne1991/p/6590607.html
Copyright © 2011-2022 走看看