transform图形变化
<!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图形变化的更多相关文章
- iOS Transform坐标变化
在使用CGContext时,由于Quartz 2D与UIKit坐标不一致,所以需要对context进行再一次的变化,达到预期的效果. 1. 不同坐标原点介绍 在Quartz 2D中,坐标原点在画布的左 ...
- css transform常用变化解析
本文旨在对常用变化做最直观的简析 translate 移动 translateX() X轴正方向移动(单位可为px,也可为%,为%时以自身为参照物) translateY() Y轴反方向移动 tran ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- transform、transition、animation 区别
Transform 在部分的test case当中,每每演示transform属性的,看起来好像都是带动画.这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性.而恰恰相反,tra ...
- CSS Transform / Transition / Animation 属性的区别
back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...
- CSS动画：animation、transition、transform、translate
https://blog.csdn.net/px01ih8/article/details/80780470 一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画). ...
- 2D平面中关于矩阵（Matrix）跟图形变换的讲解
在二维平面上,常用的有以下三种基本的图形变化: 1)Translation 2)Scale 3)Rotation 在canvas的开发中,我们也经常会用到这样的一些图形变换,尤其是我们在写自定义Vie ...
- CSS3的transition和transform
CSS3中的transition和transform是制作HTML5动画一定要使用到的两个属性. 注:这篇文章不考虑兼容性,只讨论webkit核心的浏览器.所以本文的所有例子请用chrome,safa ...
- 图片在 canvas 中的 选中/平移/缩放/旋转，包含了所有canvas的2D变化，让你认识到数学的重要性
1.介绍 canvas 已经出来好久了,相信大家多少都有接触. 如果你是前端页面开发/移动开发,那么你肯定会有做过图片上传处理,图片优化,以及图片合成,这些都是可以用 canvas 实现的. 如果你是 ...
随机推荐
- IOS 整体架构 和 MVC布局
IOS的生态系统 IOS生态系统不仅仅是指产品,更重要的是指 iPhone/iPad/iPod/Mac +iCloud+App整个系统,包括Siri (部分设备不支持).FaceTime.Safari ...
- supervisor 安装、配置、常用命令
前言 在 web 应用部署到线上后,需要保证应用一直处于运行状态,在遇到程序异常.报错等情况,导致 web 应用终止时,需要保证程序可以立刻重启,继续提供服务. 所以,就需要一个工具,时刻监控 web ...
- JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传
主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...
- 使用QUnit进行自动化单元测试
前言 前阵子由于项目需求接触了java的单元测试JUnit,就顺带着学习了前端的单元测试:Qunit. 既然跟测试有关,不妨介绍一下测试中的黑盒测试.白盒测试以及单元测试. 1.黑盒测试:所谓的黑盒, ...
- Xamarin.Android再体验之简单的登录Demo
一.前言 在空闲之余,学学新东西 二.服务端的代码编写与部署 这里采取的方式是MVC+EF返回Json数据,(本来是想用Nancy来实现的,想想电脑太卡就不开多个虚拟机了,用用IIS部署也好) 主要是 ...
- C#获取IP和整数IP方法
体验: http://tool.hovertree.com/info/ip/代码如下: using System; using System.Text; using System.Text.Regul ...
- java web学习总结(二十一) -------------------模拟Servlet3.0使用注解的方式配置Servlet
一.Servlet的传统配置方式 在JavaWeb开发中, 每次编写一个Servlet都需要在web.xml文件中进行配置,如下所示: 1 <servlet> 2 <servlet- ...
- java web学习总结(十一) -------------------基本概念使用Cookie进行会话管理
一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 有状态会话:一个同学来过教室,下次再来教室,我们会知道这个同学曾 ...
- [ASP.NET Core] Middleware
前言 本篇文章介绍ASP.NET Core里,用来处理HTTP封包的Middleware,为自己留个纪录也希望能帮助到有需要的开发人员. ASP.NET Core官网 结构 在ASP.NET Core ...
- jQuery实现选项联动轮播
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...