canva旋转图片 js_HTML5 Canvas旋转图像

婷婷同学_

您可以使用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();}这是代码和小提琴：http： //jsfiddle.net/m1erickson/6ZsCz/nbsp;html>

 

    Rotate right

    Rotate left