html5自动旋转图片,HTML5画布旋转图片

你可以使用canvas’context.translate& context.rotate来旋转你的图像

这里有一个函数来绘制旋转了指定度数的图像：

function drawRotated(degrees){

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

// save the unrotated context of the canvas so we can restore it later

// the alternative is to untranslate & unrotate after drawing

context.save();

// move to the center of the canvas

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

// rotate the canvas to the specified degrees

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

// draw the image

// since the context is rotated, the image will be rotated also

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

// we’re done with the rotating so restore the unrotated context

context.restore();

}

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="houseicon.png";

$("#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