Question

image = new Image();
image.src = 'assets/img/image.png';
for (var i = 0; i < this.bombs.length; i++) {
  var bomb = this.bombs[i];
  ctx.drawImage(image, bomb.x - 2, bomb.y - 2, 15, 8);

}

这是我的画布游戏中的图像，从顶部掉下来。但我想，让图像随机旋转每个状态。

我试过了：

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

在我的图片中添加了此功能但不起作用。我该怎么做？

Answer 1

你走在正确的轨道上！

旋转一个（或多个）图像：

转换为您希望图像居中的中心点。
以所需角度旋转
绘制图像
撤消转换（撤消翻译和转动）。

一些变化：

您始终translate到画布中间。如果你想让炸弹掉落，你必须越来越多地翻译画布。
一个拼写错误：在drawImage中，您使用了width来表示宽度和宽度。身高参数。
效率：context.save and context.restore是更昂贵的操作，因为它们节省了＆amp;恢复所有画布样式。相反，使用context.setTransform(1,0,0,1,0,0)

以下是您为这些更改重构的代码：

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var bomb;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/danger.png";
function start(){
    var aa=img.width*img.width;
    var bb=img.height*img.height;
    var cc=Math.sqrt(aa+bb);
    bomb={
        x:150,y:-img.height/2,
        degrees:0,image:img,
        maxRotatedHalfHeight:cc/2
    };
    requestAnimationFrame(animate);
}

function drawRotated(b){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(b.x,b.y);
    ctx.rotate(b.degrees*Math.PI/180);
    ctx.drawImage(b.image,-b.image.width/2,-b.image.height/2);
    ctx.restore();
}

function animate(time){
    drawRotated(bomb);
    bomb.y+=1;
    bomb.degrees+=1;
    if(bomb.y<=canvas.height+bomb.maxRotatedHalfHeight){
        requestAnimationFrame(animate);
    }else{
            alert('Animation is complete.');
    }
}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

＆＃13;

<canvas id="canvas" width=300 height=175></canvas>

＆＃13;

通过JavaScript旋转每个上下文

1 个答案: