您现在的位置:首页 --> JavaScript --> 图片旋转的小例子
图片旋转的小例子
浏览:2625次 出处信息
以下是代码片段: <script type="text/javascript"> var c1 = document.getElementById("c1"); ctx = c1.getContext("2d"), image = document.createElement("IMG"); image.onload = function() { c1.width = image.height; c1.height = image.width; ctx.translate(0, image.width); ctx.rotate(270*Math.PI/180); ctx.drawImage(image, 0, 0); } image.src = "http://img1.cache.netease.com/img09/logo/logo_v1.gif"; </script> |
IE应该用滤镜实现同样的效果。
rotate()这个函数接收的是弧度值。角度乘以0.017(2π/360)可以转变为弧度。
图片转转转
以下是代码片段: <!DOCTYPE html> <html> <head> <title>Demo</title> <style type="text/css"> html, body { margin: 0; padding: 0; } </style> </head> <body> <canvas id="c1"></canvas> <script type="text/javascript"> var image = document.createElement("IMG"); image.onload = function() { var c1 = document.getElementById("c1"), rotate = null, len = Math.sqrt(Math.pow(image.width, 2) + Math.pow(image.height, 2)), center = {x: len / 2, y: len / 2}; //判断是否为IE if(/*@cc_on!@*/0) { (function() { var div = document.createElement("DIV"); div.style.position = "relative"; div.style.marginTop = div.style.marginLeft = len / 2 + "px"; div.appendChild(image); c1.parentNode.insertBefore(div, c1); c1.parentNode.removeChild(c1); c1 = null; image.style.position = "absolute"; //设置滤镜 image.style.filter = "progid:DXImageTransform.Microsoft.Matrix()"; var filter = image.filters.item(0); filter.SizingMethod = "auto expand"; filter.FilterType = "bilinear"; rotate = function(rad){ var costheta = Math.cos(rad), sintheta = Math.sin(rad); filter.M11 = filter.M22 = costheta; filter.M12 = -(filter.M21 = sintheta); //将图片的重心调节到旋转点。 image.style.top = (-image.offsetHeight) / 2 + ’px’; image.style.left = (-image.offsetWidth) / 2 + ’px’; } })(); } else { (function() { var ctx = c1.getContext("2d"); rotate = function(rad){ c1.width = c1.height = len; ctx.translate(center.x, center.y); ctx.rotate(rad); //绘制图片,并将图片的重心调节到旋转点。 ctx.drawImage(image, -image.width / 2, -image.height / 2); } })(); } //开始旋转 (function() { if(rotate) { var angle = 0; setInterval(function() { var rad = ((angle++)*Math.PI / 180) % 360; rotate(rad) }, 10); } })(); } image.src = "http://img1.cache.netease.com/img09/logo/logo_v1.gif"; </script> </body> </html> |
建议继续学习:
- 图片动态局部毛玻璃模糊效果的实现 (阅读:13577)
- 淘宝图片存储架构 (阅读:9810)
- 解决IE6从Nginx服务器下载图片不Cache的Bug (阅读:7081)
- When we`re only No.2, we try harder之聊天表情设计小探讨 (阅读:6500)
- 精于图片处理的10款jQuery插件 (阅读:6204)
- phpThumb:强大的缩微图类 (阅读:5455)
- 贴着另一枚硬币旋转一周则自身转了两周:不同的解释方法 (阅读:5441)
- js实现预加载图片让图片快速显示 (阅读:4934)
- 利用开源的Gearman框架构建分布式图片处理平台[原创] (阅读:4247)
- 使用数据库存放图片 (阅读:4179)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:JS中如何判断字符串类型的数字
文章信息
- 作者:小寒 来源: 记事本
- 标签: 图片 旋转
- 发布时间:2010-08-05 10:00:54
建议继续学习
近3天十大热文
- [66] Oracle MTS模式下 进程地址与会话信
- [66] Go Reflect 性能
- [65] 如何拿下简短的域名
- [59] android 开发入门
- [59] 图书馆的世界纪录
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 【社会化设计】自我(self)部分――欢迎区
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [46] 读书笔记-壹百度:百度十年千倍的29条法则