<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style></head><body><div><canvas id = "canvas" width = "1300px" height = "800px"></canvas></div> <script type = "text/javascript" >
window.onload=function(){
var context = document.getElementById('canvas').getContext('2d')
/* transform 变化矩阵
context.transform(1,0,0,1,0,0); 默认值
参数2：x坐标的倾斜度
context.transform(1,2,0,1,0,0)
参数3：y坐标的倾斜度
context.transform(1,0,2,1,0,0)
参数1：x坐标的放大倍数
context.transform(3,0,0,1,0,0) == context.scale(3,1);
参数4：y坐标的放大倍数
context.transform(1,0,0,2,0,0) == context.scale(1,2);
参数5：x坐标的偏移
context.transform(1,0,0,1,50,0) == context.translate(50,0);
参数6：y坐标的偏移
context.transform(1,0,0,1,50,40) == context.translate(50,40);

注意： transform 会叠加
解决方案： context.setTransform(1,0,0,1,10,10);

*/
context.strokeStyle='#eeeeee';
context.fillStyle='rgba(70,200,200,0.5)';
context.lineWith = 9;

context.save();
context.transform(1,2,2,1,0,100);
context.transform(1,0,0,1,0,0); //有叠加，附加在之前的变化
context.fillRect(30,30,100,150);
context.strokeRect(30,30,100,150);
context.restore();

context.save();
context.setTransform(1,0,0,1,0,0);//解决叠加方案：
context.fillRect(300,30,100,150);
context.strokeRect(300,30,100,150);
context.restore();
}
</script> </body> </html>

transform图形变化的更多相关文章

  1. iOS Transform坐标变化

    在使用CGContext时,由于Quartz 2D与UIKit坐标不一致,所以需要对context进行再一次的变化,达到预期的效果. 1. 不同坐标原点介绍 在Quartz 2D中,坐标原点在画布的左 ...

  2. css transform常用变化解析

    本文旨在对常用变化做最直观的简析 translate 移动 translateX() X轴正方向移动(单位可为px,也可为%,为%时以自身为参照物) translateY() Y轴反方向移动 tran ...

  3. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  4. transform、transition、animation 区别

    Transform 在部分的test case当中,每每演示transform属性的,看起来好像都是带动画.这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性.而恰恰相反,tra ...

  5. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  6. CSS动画：animation、transition、transform、translate

    https://blog.csdn.net/px01ih8/article/details/80780470 一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画). ...

  7. 2D平面中关于矩阵（Matrix）跟图形变换的讲解

    在二维平面上,常用的有以下三种基本的图形变化: 1)Translation 2)Scale 3)Rotation 在canvas的开发中,我们也经常会用到这样的一些图形变换,尤其是我们在写自定义Vie ...

  8. CSS3的transition和transform

    CSS3中的transition和transform是制作HTML5动画一定要使用到的两个属性. 注:这篇文章不考虑兼容性,只讨论webkit核心的浏览器.所以本文的所有例子请用chrome,safa ...

  9. 图片在 canvas 中的 选中/平移/缩放/旋转，包含了所有canvas的2D变化，让你认识到数学的重要性

    1.介绍 canvas 已经出来好久了,相信大家多少都有接触. 如果你是前端页面开发/移动开发,那么你肯定会有做过图片上传处理,图片优化,以及图片合成,这些都是可以用 canvas 实现的. 如果你是 ...

随机推荐

  1. EntityFramework DbContext 线程安全

    先看这一段异常信息: A second operation started on this context before a previous asynchronous operation compl ...

  2. RMAN Catalog创建、配置和管理

    环境:RHEL6.4 + Oracle 11.2.0.4 一.创建数据库catdb 1.1 官档的建库脚本示例 1.2 根据我实际环境修改如下项 1.3 创建必要目录并赋予权限 1.4 执行脚本建库 ...

  3. Front End Developer Questions 前端开发人员问题（二）

    问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 二.CSS 1.介绍一下标准的CSS的盒子模型?与低版本IE的盒子模 ...

  4. Jackson的简单用法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1简介 Jackson具有比较高的序列化和反序列化效率,据测试,无论是 ...

  5. Java中的反射机制

    Java反射机制 反射机制定义 反射机制是Java语言中一个非常重要的特性,它允许程序在运行时进行自我检查,同时也允许其对内部成员进行操作.由于反射机制能够实现在运行时对类进行装载,因此能够增加程序的 ...

  6. 2.Java基础之Runtime对象

    毕向东老师Java基础学习笔记——Runtime对象 今天学习Java中的Runtime对象后,感觉这个对象对我们主要有以下几点用处. 1.使用java代码打开本地可执行文件,比如打开一个计算器. 2 ...

  7. Mybatis 入门 -- 最简单的引入和使用

    参考:http://www.mybatis.org/mybatis-3/zh/getting-started.html 从今天开始学习官方文档. 1.项目搭建 项目结构: 首先,搭建一个maven项目 ...

  8. Moon.Orm 5.0 (MQL版) 实际开发实例Demo

    http://www.cnblogs.com/humble/p/4593133.html  (文章新地址) http://www.cnblogs.com/humble/p/4593133.html  ...

  9. 微信小程序：原生热布局终将改变世界

    关于本文的所有观点都是网上收集,与作者本人没有任何关系! 最近朋友圈已经被微信小程序刷屏了,这也难怪,腾讯的产品拥有广泛的影响力,谁便推出个东西,都会有很多人认为会改变世界,这不,张小龙刚一发布微信小 ...

  10. MapReduce Shuffle过程

    MapReduce Shuffle 过程详解 一.MapReduce Shuffle过程 1. Map Shuffle过程 2. Reduce Shuffle过程 二.Map Shuffle过程 1. ...