<!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. iOS chart 图表完美解决方案 基于swift

    如果打算在app中使用图标功能,这个框架基本能够满足90%的需求 下边是作者的框架的下载地址 ,基于swift2.0 https://github.com/danielgindi/ios-charts ...

  2. matlab基础教程——根据Andrew Ng的machine learning整理

    matlab基础教程--根据Andrew Ng的machine learning整理 基本运算 算数运算 逻辑运算 格式化输出 小数位全局修改 向量和矩阵运算 矩阵操作 申明一个矩阵或向量 快速建立一 ...

  3. 利用SimpleExpandableListAdapter为ExpandableListActivity提供数据

    首先MainActivity继承自ExpandableListActivity,其中的声明如下: setContentView(R.layout.expandmain); //定义一个:List,该L ...

  4. Buffer cache hit ratio性能计数器真的可以作为内存瓶颈的判断指标吗？

    Buffer cache hit ratio官方是这么解释的:“指示在缓冲区高速缓存中找到而不需要从磁盘中读取的页的百分比.” Buffer cache hit ratio被很多人当做判断内存的性能指 ...

  5. 推荐13款优秀的Twitter Bootstrap JavaScript插件

    Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...

  6. VS编译链接时错误(Error Link2005)的解决方法

    近期参与的项目中使用了公司另外一个同事提供的一个静态库文件.该静态库文件集成了CUDA, OpenCL两个库,用于做图形加速计算,提高视频解码拼接速度.但是在编译链接项目时,VS爆出如下错误: 1&g ...

  7. 用户反馈：对 Rafy 开发框架的一些个人建议

      这篇文章是去年 Rafy 框架发布后,许胜平先生为我提出的一些建议.他从用户群体分析.社区.商业模式.技术支持等方面对框架发展提出了建议,我觉得写得非常不错.此文不仅适用于 Rafy 框架,所以不 ...

  8. 【原创】Kafka topic常见命令解析

    本文着重介绍几个常用的topic命令行命令,包括listTopic,createTopic,deleteTopic和describeTopic等.由于alterTopic并不是很常用,本文中就不涉及了 ...

  9. 【转】 App架构设计经验谈:接口的设计

    App与服务器的通信接口如何设计得好,需要考虑的地方挺多的,在此根据我的一些经验做一些总结分享,旨在抛砖引玉. 安全机制的设计 现在,大部分App的接口都采用RESTful架构,RESTFul最重要的 ...

  10. [C#] 获取打印机列表

    一:获得本地安装的打印机列表 注:(如果在"设备和打印机"中已经添加了局域网的打印机设备,也算是本地安装的打印机:没有添加的则算作局域网打印机) 1,通过 C# 中 Printer ...