<!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. 一个简易的MysQL性能查询脚本

    如下: #!/bin/sh mysqladmin -P3306 -uroot -p ext |\ awk -F"|" \ "BEGIN{ count=0; }" ...

  2. Oracle层次查询

    Oracle层次查询的语法如下: 下面根据两道“烧脑”的题具体来体现: 1. 根据时间先后顺序,十二星座的英文名称用逗号串起来为'Aries,Taurus,Gemini,Cancer,Leo,Virg ...

  3. SPRING多个占位符配置文件解析源码研究--转

    原文地址:http://www.cnphp6.com/archives/85639 Spring配置文件: <context:property-placeholder location=&quo ...

  4. 关于opencv中人脸识别主函数的部分注释详解。

    近段时间在搞opencv的视频人脸识别,无奈自带的分类器的准确度,实在是不怎么样,但又能怎样呢?自己又研究不清楚各大类检测算法. 正所谓,功能是由函数完成的,于是自己便看cvHaarDetectObj ...

  5. 相克军_Oracle体系_随堂笔记008-存储结构

    控制文件.数据文件.日志文件    放在存储上.   参数文件:数据库启动时读取,并不关闭,但是启动过后丢了也没事.一般放在服务器上. $ORACLE_HOME/dbs下   备份文件{     控制 ...

  6. JavaMail基础案例开发

    Java邮件开发案例 所需jar包有:mailapi.jar,smtp.jar 一.单独邮件发送案例 package com.itRed.javamail; import java.util.Prop ...

  7. js制作点击会自动隐藏的导航栏（固定在在头部的）

    想必大家应该见过这样的特效,本来头部是固定在网页的最上方的,点一下缩进去,再点一下 又可以缩回来,这种效果怎么实现的呢,我今天就做了一个.菜鸟勿喷. @charset "utf-8" ...

  8. Struts2 源码分析——配置管理之PackageProvider接口

    本章简言 上一章讲到关于ContainerProvider的知识.让我们知道struts2是如何注册相关的数据.也知道如何加载相关的配置信息.本章笔者将讲到如何加载配置文件里面的package元素节点 ...

  9. js的stopPropagation()、cancelBubble、preventDefault()、return false的分析

    个人笔记,如有错误,望指出. 事件冒泡,举个列子: <li> <a href='http://www.baidu.com'>点击a</a> </li> ...

  10. C#基础-FileStream

    一.FileStream的基础知识 属性:          CanRead 判断当前流是否支持读取,返回bool值,True表示可以读取          CanWrite 判断当前流是否支持写入, ...