gpt4 book ai didi

javascript - 如何使用 js 更改位于 Canvas 中的对象的 css 属性?

转载 作者:太空宇宙 更新时间:2023-11-04 06:47:40 25 4
gpt4 key购买 nike

我正在制作一款游戏,我遇到了一个问题。当他向左移动时,我需要反转我的 Angular 色,我不能只创建一个反转图像并使用它,我不能反转 Canvas ,因为我会有一些新 Angular 色,它们不应该反转。一种方法是引用我的 Angular 色 css 属性并使用 js 添加如下内容:

-webkit-transform: scaleX(-1);
transform: scaleX(-1);

我可以在 Canvas 中做到这一点吗?如何做?


用箭头移动

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var lifes = 700;

var fon = new Image();
fon.src = "/image/HjXpq.jpg";

var life_red = new Image();
life_red.src = "/image/sGZ7l.jpg";

var life_green = new Image();
life_green.src = "/image/9eWXX.jpg";

var iron_man_img = new Image(); // Player walking right
iron_man_img.src = '/image/aeTtS.png';
var iron_man = {
x: 300,
y: 50,
dx: 100,
dy: 0.1,
dfly: 500,
run: 0, //animation
runspeed: 5, // animation speed
fly: false,
timeforflying: 0,
alive: true
}
var keys = {};

function setKey(event, status) {
var code = event.keyCode;
var key;
if (code == 32) {
key = "Space";
} else if (code == 37) {
key = "Left";
} else if (code == 38) {
key = "Up";
} else if (code == 39) {
key = "Right";
} else if (code == 40) {
key = "Down";
} else {
key = String.fromCharCode(code);
}
keys[key] = status;
}

document.addEventListener('keydown', function(e) {
setKey(e, true);
});
document.addEventListener('keyup', function(e) {
setKey(e, false);
});
document.addEventListener('blur', function() {
keys = {};
});

function isDown(key) {
return keys[key];
}
iron_man_img.onload = function() {
last = Date.now();
game();
}

function game() {

var now = Date.now();
var dt = (now - last) / 1000;
update(dt);
render();
last = now;
requestAnimFrame(game);
}

function update(dt) {
if (isDown("Right") || isDown("D")) {
iron_man.run += iron_man.runspeed * dt;
iron_man.x += iron_man.runspeed * dt * 10;
}
if (isDown("Left") || isDown("A")) {
iron_man.run += iron_man.runspeed * dt;
iron_man.x -= iron_man.runspeed * dt * 10;
}
//console.log(iron_man.runspeed * dt);
}

function render() {
var width = window.innerWidth;
var height = window.innerHeight;
//console.log(width/height);
//console.log(700/500);
if (width / height > 700 / 500) {
$('canvas').css('height', height);
$('canvas').css('width', height / 500 * 700);
} else {
$('canvas').css('width', width);
$('canvas').css('height', width / 700 * 500);
}


context.fillStyle = "green";
curr_life = new Image();
curr_life.src = "Sprites/life_green.jpg";
for (var i = 0; i < 1800; i++) { // HP
if (i == lifes) {
curr_life.src = "Sprites/life_red.jpg";
}
//context.drawImage(curr_life, 240, 268, i, 0, 1, 1);
context.drawImage(curr_life, i, 0, 10, 10);
}
if (lifes != 0) {
//lifes--;
}
context.drawImage(fon, 0, 0, 1000, 1000);
context.drawImage(iron_man_img, 44 * (Math.round(iron_man.run) % 8) + 1.2, 0, 44, 65, iron_man.x, iron_man.y, 50, 60);
//console.log(iron_man.run);
//iron_man.x+=1;
//iron_man.x+=1;
}
var requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 50);
};
})();
#canvas {
background-color: lightblue;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: block;
padding: 0;
}

body {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div align="center" class="canvas-div">
<canvas id="canvas" width="700" height="500" style="border: 1px solid black" class="canvas">
Canvas is not working in your browser
</canvas>
</div>

最佳答案

是的,最好的办法是使用 Canvas 比例尺,为了使其正常工作必须进行一些更改,但我会尽力解释它们。

为了记录方向,我添加了 iron_man.z 并使用 -1 表示面向左,使用 1 表示面向右,这是因为这就是缩放的工作原理。

接下来,在 update() 中,我们需要根据按下的键将 iron_man.z 设置为 1 或 -1。

现在是复杂的部分。我们运行 context.save() 来记住我们的所有设置,然后再进行平移和缩放。

我们必须平移以设置比例原点,我们希望原点是钢铁侠的中心。为了计算出 iron_man.x + width/2 和 iron_man.y + height/2 (context.translate(iron_man.x + 25, iron_man.y + 30)),这意味着 ironman 的位置也需要不同,但我们需要先扩展。

对于规模我们只需要 iron_man.z 所以我们有这个 context.scale(iron_man.z,1)

最后我们绘制图像,现在因为我们已经将原点设置为 ironman 的中心,所以我们需要将 x 和 y 坐标放在 -(width/2), -(height/2)。

最后,我们要使用 context.restore()

恢复 Canvas

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var lifes = 700;

var fon = new Image();
fon.src = "/image/HjXpq.jpg";

var life_red = new Image();
life_red.src = "/image/sGZ7l.jpg";

var life_green = new Image();
life_green.src = "/image/9eWXX.jpg";

var iron_man_img = new Image(); // Player walking right
iron_man_img.src = '/image/aeTtS.png';
var iron_man = {
x: 300,
y: 50,
z: -1,
dx: 100,
dy: 0.1,
dfly: 500,
run: 0, //animation
runspeed: 5, // animation speed
fly: false,
timeforflying: 0,
alive: true
}
var keys = {};

function setKey(event, status) {
var code = event.keyCode;
var key;
if (code == 32) {
key = "Space";
console.log(iron_man)
} else if (code == 37) {
key = "Left";
} else if (code == 38) {
key = "Up";
} else if (code == 39) {
key = "Right";
} else if (code == 40) {
key = "Down";
} else {
key = String.fromCharCode(code);
}
keys[key] = status;
}

document.addEventListener('keydown', function(e) {
setKey(e, true);
});
document.addEventListener('keyup', function(e) {
setKey(e, false);
});
document.addEventListener('blur', function() {
keys = {};
});

function isDown(key) {
return keys[key];
}
iron_man_img.onload = function() {
last = Date.now();
game();
}

function game() {

var now = Date.now();
var dt = (now - last) / 1000;
update(dt);
render();
last = now;
requestAnimFrame(game);
}

function update(dt) {
if (isDown("Right") || isDown("D")) {
iron_man.run += iron_man.runspeed * dt;
iron_man.x += iron_man.runspeed * dt * 10;
iron_man.z = 1;
}
if (isDown("Left") || isDown("A")) {
iron_man.run += iron_man.runspeed * dt;
iron_man.x -= iron_man.runspeed * dt * 10;
iron_man.z = -1;
}
//console.log(iron_man.runspeed * dt);
}

function render() {
var width = window.innerWidth;
var height = window.innerHeight;
//console.log(width/height);
//console.log(700/500);
if (width / height > 700 / 500) {
$('canvas').css('height', height);
$('canvas').css('width', height / 500 * 700);
} else {
$('canvas').css('width', width);
$('canvas').css('height', width / 700 * 500);
}


context.fillStyle = "green";
curr_life = new Image();
curr_life.src = "Sprites/life_green.jpg";
for (var i = 0; i < 1800; i++) { // HP
if (i == lifes) {
curr_life.src = "Sprites/life_red.jpg";
}
//context.drawImage(curr_life, 240, 268, i, 0, 1, 1);
context.drawImage(curr_life, i, 0, 10, 10);
}
if (lifes != 0) {
//lifes--;
}
context.drawImage(fon, 0, 0, 1000, 1000);
context.save();
context.translate(iron_man.x + 25, iron_man.y + 30);
context.scale(iron_man.z, 1);
context.drawImage(iron_man_img, 44 * (Math.round(iron_man.run) % 8) + 1.2, 0, 44, 65, -25, -30, 50, 60);
context.restore();
//console.log(iron_man.run);
//iron_man.x+=1;
//iron_man.x+=1;
}
var requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 50);
};
})();
#canvas {
background-color: lightblue;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: block;
padding: 0;
}

body {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div align="center" class="canvas-div">
<canvas id="canvas" width="700" height="500" style="border: 1px solid black" class="canvas">
Canvas is not working in your browser
</canvas>
</div>

关于javascript - 如何使用 js 更改位于 Canvas 中的对象的 css 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53155788/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com