HTML怎么实现图片旋转,html5 canvas rotate属性实现图片旋转

html5 canvas rotate属性实现图片旋转

body{ background-color: ivory; }

canvas{border:1px solid red;}

$(function(){

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

var angleInDegrees=0;

var image=document.createElement("img");

image.οnlοad=function(){

ctx.drawImage(image,canvas.width/2-image.width/2,canvas.height/2-image.width/2);

}

image.src="https://www.baidu.com/img/bd_logo1.png?where=super";

$("#clockwise").click(function(){

angleInDegrees+=30;

drawRotated(angleInDegrees);

});

$("#counterclockwise").click(function(){

angleInDegrees-=30;

drawRotated(angleInDegrees);

});

function drawRotated(degrees){

ctx.clearRect(0,0,canvas.width,canvas.height);

ctx.save();

ctx.translate(canvas.width/2,canvas.height/2);

ctx.rotate(degrees*Math.PI/180);

ctx.drawImage(image,-image.width/2,-image.width/2);

ctx.restore();

}

}); // end $(function(){});

Rotate right

Rotate left