使用drawImage函数的图像未显示HTML5 Canvas（多幅图像）

Question

Everyone! 大家！ I am making a school project with the HTML5 canvas and upon adding a second image (with the drawImage function), it won't show up. 我正在使用HTML5画布制作学校项目，并添加第二个图像（使用drawImage函数）后，该项目不会显示。 Here's my code: 这是我的代码：

<!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>

I need this fixed ASAP! 我需要尽快解决此问题！ Please, everyone. 请大家。 I need to get a good grade on this. 我需要为此获得良好的成绩。

Thanks so much, Ben AKA BlackSky! 非常感谢Ben AKA BlackSky！

Answer 1

Not really sure this is what you exactly want but, here you go ... 不太确定这是否是您真正想要的，但是，您来了...

 <!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>

使用drawImage函数的图像未显示HTML5 Canvas（多幅图像）

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-03-19 03:29:04

使用drawImage函数的图像未显示HTML5 Canvas（多幅图像）

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-03-19 03:29:04

解决方案1
0 已采纳 2017-03-19 03:29:04