您现在的位置：首页 --> JavaScript --> 图片旋转的小例子
图片旋转的小例子
浏览:2875次 出处信息
<script type="text/javascript"> |
02 |
var c1 = document.getElementById("c1"); |
03 |
ctx = c1.getContext("2d"), |
04 |
image = document.createElement("IMG"); |
05 |
image.onload = function() { |
06 |
c1.width = image.height; |
07 |
c1.height = image.width; |
08 |
ctx.translate(0, image.width); |
09 |
ctx.rotate(270*Math.PI/180); |
10 |
ctx.drawImage(image, 0, 0); |
11 |
} |
12 |
image.src = "http://img1.cache.netease.com/img09/logo/logo_v1.gif"; |
13 |
</script> |
IE应该用滤镜实现同样的效果。
rotate()这个函数接收的是弧度值。角度乘以0.017(2π/360)可以转变为弧度。
建议继续学习：
- 图片动态局部毛玻璃模糊效果的实现 (阅读：14521)
- 淘宝图片存储架构 (阅读：10701)
- 解决IE6从Nginx服务器下载图片不Cache的Bug (阅读：8037)
- When we`re only No.2, we try harder之聊天表情设计小探讨 (阅读：7054)
- 精于图片处理的10款jQuery插件 (阅读：7110)
- 通过php+imagick 创建PDF图片预览 (阅读：6859)
- phpThumb:强大的缩微图类 (阅读：6461)
- 贴着另一枚硬币旋转一周则自身转了两周：不同的解释方法 (阅读：6165)
- js实现预加载图片让图片快速显示 (阅读：6003)
- 利用开源的Gearman框架构建分布式图片处理平台[原创] (阅读：5096)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：再论Javascript的类继承
后一篇：25个优秀的jQuery滑块教程和插件 >>
文章信息
- 作者：robot 来源： UED TEAM
- 标签： 图片 旋转
- 发布时间：2010-06-22 13:13:32
建议继续学习
近3天十大热文
-
[1198] WordPress插件开发 -- 在插件使用 -
[89] 解决 nginx 反向代理网页首尾出现神秘字
-
[43] web开发设计人员不可不用的在线web工具和
-
[30] Rax 系列教程（长列表）
-
[29] 一句话crontab实现防ssh暴力破解
-
[29] 手机产品设计方向
-
[28] Java开发岗位面试题归类汇总
-
[28] 如何建立合适的索引？
-
[26] 程序员疫苗：代码注入
-
[25] 我对学习oracle与成长的理解
