Question

大家好！我正在使用HTML5画布创建一个学校项目，并在添加第二个图像（使用drawImage功能）时，它不会显示出来。这是我的代码：

<!DOCTYPE html>
<html>

<head>
    <title>Game</title>
</head>

<body> <canvas id="gC" width="1500" height="1000"></canvas>
    <script type="text/javascript">
    var canvas = document.querySelector("#gC");
    var ctx = canvas.getContext("2d");
    var team1 = new Image();
    var bT = new Image();
    var t1_x = 250;
    var t1_y = 250;
    var bT_x = 50;
    var bT_y = 350;
    canvas.height = 1000;
    canvas.width = 1500;
    team1.xPos = 250;
    team1.yPos = 250;
    team1.src = "../game/team1.png";
    bT.src = "../game/bT.png";
    dE();

    function team1AI() {
        ctx.clearRect(0, 0, ctx.canvas.height, ctx.canvas.width);
        ctx.drawImage(team1, t1_x, t1_y);
        t1_x++;
    }
    setInterval(team1AI, 10);

    function dE() {
        ctx.drawImage(team1, t1_x, t1_y);
        ctx.drawImage(bT, bT_x, bT_y);
    }
    </script>
    <style type="text/css">
    #gC {
        position: relative;
        left: 16vw;
        top: 9vh;
        margin: 0;
        padding: 0;
    }

    body {
        background-image: url('bg.jpeg') !important;
    }
    </style>

我需要这个固定的A.S.A.P！请大家。我需要在这方面取得好成绩。

非常感谢， Ben A.K.A BlackSky！

Answer 1

不确定这是你想要的，但是，你走了......

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title>Game</title>
    <style type="text/css">
    #gC {
        position: relative;
        left: 16vw;
        top: 9vh;
        margin: 0;
        padding: 0;
    }
    
    body {
        background-image: url('bg.jpeg') !important;
    }
    </style>
</head>

<body> <canvas id="gC" width="1500" height="1000"></canvas>
    <script type="text/javascript">
    var canvas = document.querySelector("#gC");
    var ctx = canvas.getContext("2d");
    var team1 = new Image();
    var bT = new Image();
    var t1_x = 250;
    var t1_y = 250;
    var bT_x = 50;
    var bT_y = 350;
    var interval;
    var seconds = 0;
    team1.src = "https://www.dreamteamfc.com/g/img/dream-team-logo.png";
    bT.src = "https://team.valvoline.com/sites/all/themes/v2/img/sidebarnav/teamv_hover.png";

    function team1AI() {
        ctx.clearRect(0, 0, canvas.height, canvas.width);
        ctx.drawImage(bT, bT_x, bT_y);
        ctx.drawImage(team1, t1_x, t1_y);
        t1_x++;
        seconds++;
        interval = requestAnimationFrame(team1AI);
    }
    setInterval(function() {
        if (seconds === 450) cancelAnimationFrame(interval);
    }, 1000 / 60);
    team1AI();
    </script>
</body>

</html>

＆＃13;

图像未显示带有drawImage功能的HTML5 Canvas（多个图像）

1 个答案: