html5 图片旋转

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> 

  效果图:

html5 图片旋转

你可能感兴趣的:(html5)