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>

时间: 2024-10-06 08:33:09

transform图形变化的相关文章

CSS3中动画属性transform、transition和animation

Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能外,还提供了对动画的支持,可以用来实现旋转.缩放.平移.扭曲和过渡效果等等,这些功能再一次证明了CSS3功能的强大和无限潜能. CSS3实现元素变形的基础来源于新增的transform属性,该属性可用于实现元素的旋转.缩放.平移.扭曲等效果.目前webkit内核支持-webkit-transform

IO开发之图形动画

在IOS开发中图形界面的动画一般发生在以下两种情况: 1.两个uiview视图的切换,有动画效果. 2.本身视图的位置,大小,或 角度旋转 的动画效果. 一.利用uiview实现切换视图的动画,但是在切换视图的效果中只有四种样式, UIViewAnimationTransitionFlipFromLeft,   向左翻转 UIViewAnimationTransitionFlipFromRight, 向右翻转 UIViewAnimationTransitionCurlUp,          

触摸手势以及图形变换(UIGestureRecognizer, CGAffineTransform)

概要 本章主要学习了IOS开发中的触摸手势以及图形变换的知识,其中手势包括单击.双击.长按.拖动.滑动.缩放.旋转,图形变化主要使用放射矩阵的平移.缩放和旋转. 使用手势时应该注意手势是指定到特定的视图(UIView)上的,因此一个手势只能对应一个视图(手势里面的view属性可获取其所所对应的视图),而一个View可以添加多个手势.同时,因为有的手势之间有冲突的,比如单击和双击,滑动和拖动.针对这种情形需要使用手势的依赖性特性做出区分,改特性要求特定手势失败后才触发该手势. 仿射矩阵变化应该注意

主动模式和被动模式 添加监控主机 添加自定义模板 处理图形中的乱码 自动发现

一.主动模式和被动模式如果监控的主机只有几十台或者几百台服务器的时候,使用主动模式和被动模式都可以,没有问题二.添加监控主机点击"配置"---主机群组,先添加主机群组,再添加主机模板是预设的,包括监控项目的集合添加主机群组aming-test,再添加主机,主机名称和可见名称都写linux-02,IP地址填写客户端的IP地址:192.168.238.130,DNS不需要写,DNS在什么时候会用到,IP地址写主机名,DNS是用来解析主机名的时候写主动模式和被动模式需要在监控项里面去定义应用

二维图形变换

5.1二维图形变化 一.向量 是具有长度和方向的实体 二.特殊的线性组合 (1)仿射组合 (2)凸组合(对仿射组合加以更多的限制) 三.向量的点积和叉积 (1)点积 两个向量夹角的余弦值等于两个单位向量的点积 (2)叉积 两个向量的叉积是另一个三维向量,且与两个向量均正交 利用叉积求平面的法向量,三点可确定一个平面 5.2 图形坐标系 1.世界坐标系 是一个公共坐标系,是现实中物体或场景的统一参考系 2.建模坐标系 又称局部坐标系,每个物体有自己的局部中心和坐标系 3.观察坐标系 从观察者的角度

CSS3 transition动画、CSS3 transform变换、CSS3 animation动画

CSS3 transition动画 1.transition-property 设置过渡的属性,比如:width height background-color2.transition-duration 设置过渡的时间,比如:1s 500ms3.transition-timing-function 设置过渡的运动方式 linear 匀速 ease 开始和结束慢速 ease-in 开始是慢速 ease-out 结束时慢速 ease-in-out 开始和结束时慢速 cubic-bezier(n,n,

CSS3 Transforms、Transitions和Animation属性总结

css3在原来的基础上增加了变形和动画相关的属性,动画三兄弟:transform.transition和animation,通过使用这三个属性可以达到很炫酷的效果.需要注意的是这三个属性都是css3新增的属性,各大浏览器支持方面还不是特别好,使用时要特别注意浏览器的兼容性. Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explorer 9 支持替代的 -ms-transform 属

读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图

读书笔记 - js高级程序设计 - 第十三章 事件 canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好 有时候即使浏览器支持,操作系统如果缺缺乏必要的绘图驱动程序,则浏览器即使支持了也没用   <canvas> var drawing = document.getElementById("drawing"); if( drawing.getContext ){ drawing.getContext("2d"

SVG入门案例

今天我来讲一下关于使用SVG画图的一些基本知识,并完成一个简单的DEMO演示.关于SVG的基础知识,这里暂时不做阐述,因为网上关于svg的知识不算少,这里推荐大家去w3c school看就可以,另外慕课网也有很多svg的视频,目前我对svg的了解其实也只是皮毛,这里通过一个简单的DEMO演示讲述SVG能帮我们做些什么,以及看一下关于svg的基本用法等. svg主要通过两种方式呈现在浏览器里,一种是内嵌在html中,一种是独立的svg文件,两者都可以用浏览器打开看,这里我们演示第一种,将svg嵌套