Canvas的几何变换是倒序的,Matrix是正序。

比如先平移在旋转:

canvas.rotate();

canvas.translate();

//translate先执行,rotate后执行

Matrix里面就好比维护者一个双端队列,当调用preXxx方法时,将该方法放入队列的顶端,(即每来一个preXxx方法就按照代码的书写顺序依次放入队列的顶端)

当调用setXxx方法时,清空当前队列,(如此说来,在setXxx之前调用的preXxx,postXxx都是无效的)

当调用postXxx方法时,将方法放入队列的末端,(即每来一个postXxx方法就按照代码的书写顺序依次放入队列的顶端)

因此大家一般使用时的代码是:先调用setXxx,再调用 preXxx,postXxx,(这里preXxx方法与postXxx的代码书写的先后顺序无所谓,但是setXxx必须是在两个方法之前调用)

 

camera是三维变换

如果camera旋转需要图形左右对称,需要配合上 Canvas.translate(),在三维旋转之前把绘制内容的中心点移动到原点,即旋转的轴心,然后在三维旋转后再把投影移动回来:

Canvas,Matrix的变换顺序的更多相关文章

  1. canvas基础之变换

    2D绘制上下文支持各种基本的绘制变换: rotate(angle):围绕原点旋转图像angle弧度.(举例:如需旋转 5 度,可规定下面的公式:5*Math.PI/180.) scale(scaleX ...

  2. 表格行变换顺序功能(jquery)

    周末写了个更改表格行顺序的小功能,直接贴代码 表格部分如下: <table class="table" id="test_table"> <t ...

  3. canvas基础—图形变换

    1.canvas转换方法 1.1canvas转换方法 二.canvas实现图形的中心点旋转 step1:获取canva元素并指定canvas的绘图环境 var canvas=document.getE ...

  4. 54. Spiral Matrix以螺旋顺序输出数组

    [抄题]: Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spi ...

  5. android学习7——canvas.concat(Matrix matrix)作用

    canvas.concat的作用可以理解成对matrix的变换应用到canvas上的所有对象. 看下面的代码. public class ConcatMatrixActivity extends Ac ...

  6. 自定义控件详解(三):Canvas效果变换

    Canvas 画布 从前面我们已经知道了 Canvas 类可以绘出 各种形状. 这里学习一下Canvas 类的变换效果(平移,旋转等) 首先需要了解一下Canvas 画布, 我们用Canvas.Dra ...

  7. 讲解Canvas中的一些重要方法

    Canvas所提供的各种方法根据功能来看大致可以分为几类: 第一是以drawXXX为主的绘制方法: 第二是以clipXXX为主的裁剪方法: 第三是以scale.skew.translate和rotat ...

  8. SVG 2D入门6 - 坐标与变换

    坐标系统 SVG存在两套坐标系统:视窗坐标系与用户坐标系.默认情况下,用户坐标系与视窗坐标系的点是一一对应的,都为原点在视窗的左上角,x轴水平向右,y轴竖直向下:如下图所示: SVG的视窗位置一般是由 ...

  9. 【转】2D动画:view的Matrix

    Matrix,中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放.平移.旋转等操作. 首先介绍一下矩阵运算.加法和减法就不用说了,太简单了,对应位相加就好.图像处理,主要用到的是乘法 ...

随机推荐

  1. 洛谷——P1179 数字统计

    https://www.luogu.org/problem/show?pid=1179 题目描述 请统计某个给定范围[L, R]的所有整数中,数字 2 出现的次数. 比如给定范围[2, 22],数字 ...

  2. Qt5官方demo解析集28——Extending QML - Signal Support Example

    本系列全部文章能够在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873 接上文Qt5官方demo解析集27--Extendin ...

  3. css结构设计思想

    本文摘自博客园-予沁安的文章:结构化CSS设计思维,作为学习笔记记录一下 1.LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的 ...

  4. (转)ORA-00257归档日志写满的解决方法

    转自:http://www.cnblogs.com/xwdreamer/p/3804509.html 背景: 在前一篇博客中我们提到了如何启动或关闭oracle的归档(ARCHIVELOG)模式,在我 ...

  5. Scala入门到精通——第十九节 隐式转换与隐式參数(二)

    作者:摇摆少年梦 配套视频地址:http://www.xuetuwuyou.com/course/12 本节主要内容 隐式參数中的隐式转换 函数中隐式參数使用概要 隐式转换问题梳理 1. 隐式參数中的 ...

  6. BaaS简介

    SaaS(软件即服务:Software as a Service).IaaS(基础设施即服务:Infrastructure as a Service)和PaaS(平台即服务:Platform as a ...

  7. 如何在vue项目中使用百度编辑器ueditor

    百度编辑器官方并没有提供vue项目使用说明,目前网上也有不少人实现了相关功能,这里就不再重复,只是针对自身项目碰到的情况做个记录,就当是熟悉了一遍富文本编辑器的代码结构. 按照网上的做法,基本可以实现 ...

  8. 3、U-boot的环境变量: bootcmd 和bootargs

    u-bootcmdbootcmd是uboot自动启动时默认执行的一些命令,因此你可以在当前环境中定义各种不同配置,不同环境的参数设置,然后设置bootcmd为你经常使用的那种参数.   现在我的boo ...

  9. Nginx+Tomcat搭建高性能负载均衡集群的实现方法

    一.    目标实现高性能负载均衡的Tomcat集群: 二.步骤 1.首先下载Nginx,要下载稳定版: 2.然后解压两个Tomcat,分别命名为apache-tomcat-6.0.33-1和apac ...

  10. hdu3377之简单路径求最值

    Plan Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...