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="100%;height:100%"> <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="600"></canvas> </div> </body> </html>
效果图: