HTML5 画布旋转图像 [英] HTML5 Canvas Rotate Image

查看：29 发布时间：2021/12/7 10:10:57 html image canvas rotation html5-canvas

本文介绍了HTML5 画布旋转图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

jQuery('#carregar').click(function() {var canvas = document.getElementById('canvas');var image = document.getElementById('image');var element = canvas.getContext(2d");element.clearRect(0, 0, canvas.width, canvas.height);element.drawImage(image, 0, 0, 300, 300);});

<头><link rel="stylesheet" type="text/css" media="all" href="css/reset.css"/><!-- 重置 css --><script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script><风格>身体{背景颜色:象牙色；}画布{边框:1px纯红色；}</风格><脚本>$(函数(){var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");varangleInDegrees=0;var image=document.createElement("img");image.onload=function(){ctx.drawImage(image,canvas.width/2-image.width/2,canvas.height/2-image.width/2);}image.src="houseicon.png";$("#顺时针").click(function(){角度角度+=30；drawRotated(angleInDegrees);});$("#counterclock").click(function(){angleInDegrees-=30;drawRotated(angleInDegrees);});函数 drawRotated(degrees){ctx.clearRect(0,0,canvas.width,canvas.height);ctx.save();ctx.translate(canvas.width/2,canvas.height/2);ctx.rotate(度*数学.PI/180);ctx.drawImage(image,-image.width/2,-image.width/2);ctx.restore();}});//结束 $(function(){});<身体><canvas id="canvas" width=300 height=300></canvas><br><button id="顺时针">向右旋转</button><button id="逆时针">向左旋转</button>

jQuery('#carregar').click(function() {
  var canvas    = document.getElementById('canvas');
  var image   = document.getElementById('image');
  var element = canvas.getContext("2d");
  element.clearRect(0, 0, canvas.width, canvas.height);
  element.drawImage(image, 0, 0, 300, 300);
});

jsfiddle.net/braziel/nWyDE/

I have a problem to rotate an image 90 ° to the right or to the left.

I use an image on the canvas, the same screen will have several canvas equal to that of the example, but I left it as close as possible to the project.

I ask, how do I rotate the image 90 ° to the left or right when I click "Rotate Left" and "Rotate Right"?

I tried several codes on the internet but none worked.

解决方案

You can use canvas’ context.translate & context.rotate to do rotate your image

Here’s a function to draw an image that is rotated by the specified degrees:

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();
}

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/6ZsCz/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

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

    var angleInDegrees=0;

    var image=document.createElement("img");
    image.onload=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(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas><br>
    <button id="clockwise">Rotate right</button>
    <button id="counterclockwise">Rotate left</button>
</body>
</html>

这篇关于HTML5 画布旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

HTML5 画布旋转图像 [英] HTML5 Canvas Rotate Image

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

HTML5 画布旋转图像 [英] HTML5 Canvas Rotate Image

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭