分享

html5 图片旋转

 nywrb 2012-06-19

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>

  效果图:

分类: 其它

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约