<!DOCTYPE htmls> <html> <head> <title></title> <style> </style> </head> <body> <div class="mid"> <canvas width="600" height="400" style="background:pink" id="canvas"> 您的浏览器当前版本不支持canvas标签 </canvas> </div> </body> </html> <script> //获取画布DOM 还不可以操作 var canvas=document.getElementById('canvas'); //alert(canvas); //设置绘图环境 var cxt=canvas.getContext('2d'); cxt.beginPath(); var img = new Image(); img.src = "./pics/psb.jpg"; cxt.drawImage(img, 100, 100, 240, 169); cxt.save(); //在异次元空间重置0,0点的位置 cxt.translate(100,100); //图片/形状旋转 //设置旋转角度 参数是弧度 角度 0-360 弧度=角度*Math.PI/180 cxt.rotate(-30*Math.PI/180); var img = new Image(); img.src = "./pics/psb.jpg"; cxt.drawImage(img, 0, 0 , 240, 169); cxt.restore(); </script>