发表新帖
发表新帖

How to rotate one image in a canvas?

前端 未结
关注
6 826
萌比男神i
萌比男神i 2020-12-20 15:26

I am making an HTML5 canvas game, and I wish to rotate one of the images.

var link = new Image();
link.src=\'img/link.png\';
link.onload=function(){
    ctx.
相关标签:
6条回答
  • 时光说笑
    2020-12-20 16:15

    You might want to put a translate(); there because the image is going to rotate around the origin and that is in the top left corner by default so you use the translate(); to change the origin.

    link.onload=function(){
    ctx.save();
    ctx.translate(x, y); // change origin
    ctx.rotate(Math.PI);
    ctx.drawImage(link,-10,-10,10,10);
    ctx.restore()
}
    0 讨论(0)
  • 终归单人心
    2020-12-20 16:15

    Your original "solution" was:

    ctx.save();
ctx.translate(x,y);
ctx.rotate(-this.angle + Math.PI/2.0);
ctx.translate(-x, -y); 
ctx.drawImage(this.daggerImage,x,y,20,20);
ctx.restore();

    However, it can be made more efficient (with no save or restore) by using this code:

    ctx.translate(x,y);
ctx.rotate(-this.angle + Math.PI/2.0);
ctx.drawImage(this.daggerImage,x,y,20,20);
ctx.rotate(this.angle - Math.PI/2.0);
ctx.translate(-x, -y);
    0 讨论(0)
  • 盖世英雄少女心
    2020-12-20 16:16

    Use .save() and .restore() (more information):

    link.onload=function(){
    ctx.save(); // save current state
    ctx.rotate(Math.PI); // rotate
    ctx.drawImage(link,x,y,20,20); // draws a chain link or dagger
    ctx.restore(); // restore original states (no rotation etc)
}
    0 讨论(0)
  • 别那么骄傲
    2020-12-20 16:22

    I ended up having to do: 

    ctx.save();
ctx.translate(x,y);
ctx.rotate(-this.angle + Math.PI/2.0);
ctx.translate(-x, -y); 
ctx.drawImage(this.daggerImage,x,y,20,20);
ctx.restore();
    0 讨论(0)
  • 小鲜肉
    2020-12-20 16:24

    Look at my solution. It's full example and the easiest to understand.

        var drawRotate = (clockwise) => {
        const degrees = clockwise == true? 90: -90;
        let canvas = $('<canvas />')[0];
        let img = $(".img-view")[0];

        const iw = img.naturalWidth;
        const ih = img.naturalHeight;

        canvas.width = ih;
        canvas.height = iw;

        let ctx = canvas.getContext('2d');

        if(clockwise){
            ctx.translate(ih, 0);
        } else {
            ctx.translate(0, iw);
        }

        ctx.rotate(degrees*Math.PI/180);
        ctx.drawImage(img, 0, 0);

        let rotated = canvas.toDataURL();        
        img.src = rotated;
    }
    0 讨论(0)
  • 野性不改
    2020-12-20 16:29

    Here i made a working example from one of my games. u can get the image from Here.

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Test</title>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');
var play = setInterval('Rotate()',16);
var i = 0;
var shipImg = new Image();
shipImg.src = 'ship.png';

function Rotate() {
  ctx.fillStyle = '#000';
  ctx.fillRect(0,0,100,100);

  ctx.save();
  ctx.translate(50, 50);
  ctx.rotate(i / 180 / Math.PI);
  ctx.drawImage(shipImg, -16, -16);
  ctx.restore();
  i += 10;
};

</script>
</body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题