work hard work smart

专注于Java后端开发。 不断总结，举一反三。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

html5 图片旋转

Posted on 2011-12-16 16:47  work hard work smart  阅读(11175)  评论(6)  编辑  收藏  举报

html5 图片旋转

找了很久，终于找到图片旋转的方法了，现在向大家分享一下！

<!DOCTYPE HTML>
<html> 
    <head> 
        <title>test rotate</title> 
        <script type="text/javascript"> 
            function startup() { 
                var canvas = document.getElementById('canvas'); 
                var ctx = canvas.getContext('2d'); 
                var img = new Image();
                img.src = 'Penguins.jpg';
                img.onload = function() {
                ctx.translate(img.width / 2, img.height / 2); 
                    ctx.rotate(30 * Math.PI / 180); 
                    ctx.drawImage(img, 0, 0, 164, 164); 
                } 
            } 
        </script> 
    </head> 
    <body onload='startup();'> 
     <div id="pw_body" style="width:100%;height:100%">
        <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="600"></canvas> 
     </div>
    </body> 
</html>

　　效果图：