Question

我已经查看了有关SO的相关问题，但似乎无法找到我正在寻找的内容。我真的非常非常喜欢画布，所以为了练习，我开始编写一个非常小的平台游戏引擎。到目前为止，我有一个小方块可以在屏幕上跳跃和移动，但是我的下一步是给这个小方块一个武器。有很多关于如何制造射弹的教程，但没有关于如何制造近战武器（如剑）的教程。所以这就是我想要实现的目标。

这是Cube先生

先生。立方体需要武器。我可以将它添加到我的更新功能中：

// Draw player
ctx.fillStyle = player.fill
ctx.fillRect(player.x, player.y, player.width, player.height);

// Draw weapon
ctx.fillStyle = "green";
ctx.fillRect(player.x + 20, player.y - 20, 8, 30);

这给了我理想的外观

所以我已经将武器画在画布上，使用x，y值作为玩家x，y值，因此它总是附在Mr Cube上。当然，这些将在某些时候换出适当的图形，但这基本上可以作为一个看不见的命中框。我的问题是：

如何创建旋转此绘制矩形的函数（如摆动剑）。这让我很困惑。我想要实现的目标是：

到目前为止，这是我的JavaScript

// Platform game prototyping engine

// Globals

player_created = 0;
environment = 0;
debug_on = false;

// Request frames

(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();

/**
  * New Game
  * @desc Creates canvas and context then sets the height and width
  * @param [string] canvas - Canvas ID in your HTML
  * @param [integer] width - Canvas width
  * @param [integer] height - Canvas height
  * @param [string] bg - Canvas background color
*/

function new_game(canvas,width,height){
    game = document.getElementById(canvas);
    ctx = game.getContext("2d");
    game.width = width;
    game.height = height;

}

/**
  * New Player
  * @desc Creates a single player on the canvas
  * @param [integer] x - Player x position on canvas
  * @param [integer] y - Player y position on canvas
  * @param [integer] width - Player width
  * @param [integer] height - Player height
  * @param [integer] speed - Player movement speed
  * @param [integer] jumpVel - Player jump amount
  * @param [string] fill - Player fill color
*/

function new_player(x,y,width,height,speed,jumpVel,fill){
    player = {
        x: x,
        y: y,
        width: width,
        height: height,
        fill: fill,
        speed:speed,
        velX:0,
        velY:0,
        jumpVel:jumpVel,
        jumping: false
    }
    keys = [];

    ctx.fillStyle = player.fill;
    ctx.fillRect(player.x, player.y, player.width, player.height);
    ctx.fill();
    player_created = 1;
}

/**
  * New Environment
  * @desc Creates the game environment
  * @param [integer] friction - Sets the environment platfrom friction
  * @param [integer] gravity - Sets the environemnt gravity
*/

function new_environment(friction,gravity){
    environment = {
        friction: friction,
        gravity: gravity
    }
    document.body.addEventListener("keydown", function(e) {
        keys[e.keyCode] = true;
    });
    document.body.addEventListener("keyup", function(e) {
        keys[e.keyCode] = false;
    });
}

function debug(){
    ctx.font = "11px Verdana";
    ctx.fillStyle = "white";
    ctx.fillText('Velocity X: ' + player.velX,20,30);
    ctx.fillText('Velocity Y: ' + player.velY,20,50);
    ctx.fill();
}

function update(){
    ctx.clearRect(0,0,game.width,game.height);
    if(player_created == 1){

        // Draw player
        ctx.fillStyle = player.fill
        ctx.fillRect(player.x, player.y, player.width, player.height);

        // Draw weapon
        ctx.fillStyle = "green";
        ctx.fillRect(player.x + 20, player.y - 20, 8, 30);

        if(environment == 0){
            console.log('%c No environment has been created! ', 'background: #222; color: #bada55');
        }
        if (keys[38]) {
            // up arrow or space
            if(!player.jumping){
                player.jumping = true;
                player.velY = -player.jumpVel;
            }
        }
        if (keys[39]) {
            player.velX =+ player.speed;         
        }     
        if (keys[37]) {                 
            player.velX =- player.speed;
        }

        player.y += player.velY;
        player.x += player.velX;
        player.velY += environment.gravity;
        player.velX *= environment.friction;

        if (player.x >= game.width-player.width) {
            player.x = game.width-player.width;
        } else if (player.x <= 0) {         
            player.x = 0;     
        }

        if(player.y >= game.height - player.height){
            player.y = game.height - player.height;
            player.jumping = false;
        }
    }
    if(debug_on == true){
        debug()
    }
    requestAnimationFrame(update);
}

window.addEventListener("load", function(){
    update();
});

new_game('game',600,600)
new_player(250,250,20,20,4,20,'red')
new_environment(.9,1)

可在此处找到实时版本

http://codepen.io/jcoulterdesign/pen/d6308fc86305d70c875c30f9452aa4d6?editors=1010

提前致谢！

Answer 1

在绘制矩形之前使用ctx.rotate()功能，然后恢复旋转。

在示例中的if(player_created == 1){第96行之后添加以下代码以开始使用：

ctx.save(); // save current rotation and coordinates
ctx.translate(player.x + player.width, player.y); // set canvas draw start to new rect coordinates
ctx.rotate(Math.PI / 4); // 45 degrees for example
ctx.fillStyle = 'green';
ctx.fillRect(0, -25, 10, 30); // 10 by 30 rect, shifted 25 y up
ctx.restore(); // restore to old rotation and coordinates
ctx.fillStyle = 'red';

按下键时在画布上旋转绘制的矩形

1 个答案: