html5 图片旋转

Posted on 2011-12-16 16:47 work hard work smart 阅读(802) 评论(0) 编辑收藏

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> 

　　效果图：

分类: 其它

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。