<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload = function () { var oimg = document.getElementById('img1'); var ainput = document.getElementsByTagName('input'); var inum = 0; var yimg = new Image(); yimg.onload = function () { draw(oimg); } yimg.src = oimg.src; function draw(obj) { var oc = document.createElement('canvas'); var ogc = oc.getContext('2d'); oc.width = obj.width; oc.height = obj.height; obj.parentNode.replaceChild(oc,obj); ogc.drawImage(obj,0,0); ainput[1].onclick = function () { if(inum == 3) { inum = 0; } else { inum ++; } tochange(); } ainput[0].onclick = function () { if(inum == 0) { inum = 3; } else { inum --; } tochange(); } function tochange() { switch(inum) { case 1: oc.width = obj.height; oc.height = obj.width; ogc.rotate(90*Math.PI/180); ogc.drawImage(obj,0,-obj.height) break; case 2: oc.width = obj.width; oc.height = obj.height; ogc.rotate(180*Math.PI/180); ogc.drawImage(obj,-obj.width,-obj.height) break; case 3: oc.width = obj.height; oc.height = obj.width; ogc.rotate(270*Math.PI/180); ogc.drawImage(obj,-obj.width,0) break; case 0: oc.width = obj.width; oc.height = obj.height; ogc.rotate(0); ogc.drawImage(obj,0,0) break; } } } } </script> <style> body{ background:pink; } #c1{ background:white; } </style> </head> <body> <input type="button" value="←"/> <input type="button" value="→"/> <div> <img id="img1" src="img/5-5.jpg"> </div> </body> </html>