IT技术博客大学习 共学习 共进步

图片旋转的小例子

UED TEAM 2010-06-22 13:13:32 浏览 2,967 次
<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)可以转变为弧度。

建议继续学习

  1. 图片动态局部毛玻璃模糊效果的实现 (阅读 14,705)
  2. 淘宝图片存储架构 (阅读 10,844)
  3. 解决IE6从Nginx服务器下载图片不Cache的Bug (阅读 8,222)
  4. 精于图片处理的10款jQuery插件 (阅读 7,264)
  5. When we`re only No.2, we try harder之聊天表情设计小探讨 (阅读 7,123)
  6. 通过php+imagick 创建PDF图片预览 (阅读 6,986)
  7. phpThumb:强大的缩微图类 (阅读 6,626)
  8. 贴着另一枚硬币旋转一周则自身转了两周:不同的解释方法 (阅读 6,305)
  9. js实现预加载图片让图片快速显示 (阅读 6,123)
  10. 利用开源的Gearman框架构建分布式图片处理平台[原创] (阅读 5,225)