<!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. 最大连续子序列乘积（DP）

    题目来源:小米手机2013年校园招聘笔试题 题目描述: 给定一个浮点数序列(可能有正数.0和负数),求出一个最大的连续子序列乘积. 输入: 输入可能包含多个测试样例.每个测试样例的第一行仅包含正整数 ...

  2. 如何搭建NTP服务

    最近,在搭建Oracle RAC过程中,需要用到DNS和NTP,其中,DNS用于域名.IP管理,NTP用于时间同步.其实,很久以前搭建过这两种服务,但技术,本质上,符合“用进废退”的客观规律.用得越频 ...

  3. Visual Studio 2015 开发 ASP.NET 5 有何变化？

    本篇博文目录: ASP.NET 5 模版 ASP.NET 5 目录结构 前端管理工具 无编译开发 Microsoft Git Provider 智能感知和错误信息 Smart Unit Testing ...

  4. MAT使用--转

    原文地址: [1]http://ju.outofmemory.cn/entry/172684 [2]http://ju.outofmemory.cn/entry/129445 MAT使用入门 MAT简 ...

  5. Microsoft.Office.Interop.Excel的用法以及利用Microsoft.Office.Interop.Excel将web页面转成PDF

    1.常见用法           using Microsoft.Office.Interop.Excel; 1)新建一个Excel ApplicationClass ExcelApp = New A ...

  6. 改变word的语言字典

    改变word的语言字典 上周末看论坛有人提出否有方法用代码改变word的语言字典,因为默认的语言会影响现用语言输入的拼写器和其他校对工具.我们的Spire.doc正好支持,正好闲来无事所以我用西班牙语 ...

  7. jQuery中的Sizzle引擎分析

    我分析的jQuery版本是1.8.3.Sizzle代码从3669行开始到5358行,将近2000行的代码,这个引擎的版本还是比较旧,最新的版本已经到v2.2.2了,代码已经超过2000行了.并且还有个 ...

  8. PHP类的原理

    一.类的实现 类的内部存储结构: struct _zend_class_entry { char type; // 类型:ZEND_INTERNAL_CLASS / ZEND_USER_CLASS c ...

  9. jQuery.grep()

    什么是jQuery.grep()? jQuery.grep()是一个查找满足过滤函数的数组元素的函数.原始数组不受影响,返回值为数组. 用法介绍: 写法: jQuery.grep( array, fu ...

  10. 通过一个模拟程序让你明白ASP.NET MVC是如何运行的

    ASP.NET MVC的路由系统通过对HTTP请求的解析得到表示Controller.Action和其他相关的数据,并以此为依据激活Controller对象,调用相应的Action方法,并将方法返回的 ...