Question

大家好我有这个代码。

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="ctx" width="800" height="600" style="border:1px solid #000000;background-image:url('space-1.jpg')"></canvas>


        <script>  
            /* Základní popisky*/
            var ctx = document.getElementById("ctx").getContext("2d");
            ctx.font = '30px Arial';
            ctx.fillStyle = 'white';

            var stones = [];

            for(i = 0;i<35;i++){
                stones.push(
                    [
                        Math.ceil((Math.random() * 800) + 1),
                        Math.ceil((Math.random() * 600) + 1)
                    ]);
            }

            var stone = new Image();
            stone.src = 'asteroid.png';

            var player = new Image();
            player.src = 'falcon1.png';

            var player = {
                x : 0,
                y : 0   
            };

            function updateStone(){
                var randNumb = Math.round(Math.random());
                var anotherRandNumb = Math.floor((Math.random() * 32) + 1);
                if(randNumb === 0) {
                    if(anotherRandNumb > 16){
                        stones[Math.floor((Math.random() * stones.length) + 0)][randNumb] += Math.floor((Math.random() * 32) + 1);
                    } else {
                        stones[Math.floor((Math.random() * stones.length) + 0)][randNumb] -= Math.floor((Math.random() * 32) + 1);
                    }
                } else {
                    if(anotherRandNumb > 16){
                        stones[Math.floor((Math.random() * stones.length) + 0)][randNumb] += Math.floor((Math.random() * 32) + 1);
                    } else {
                        stones[Math.floor((Math.random() * stones.length) + 0)][randNumb] -= Math.floor((Math.random() * 32) + 1);
                    }
                }
            }
            function movePlayer(){
                player.x +=5;
            }
            setInterval(update,10);
            setInterval(updateStone, 50);
            setInterval(movePlayer, 100);
            function update(){
                ctx.clearRect(0,0,800,600);

                ctx.drawImage(player, player.x, player.y);

                for(i = 0; i < stones.length; i++) {
                    ctx.drawImage(stone, stones[i][0], stones[i][1]);
                }

               document.onkeydown = function(event){
                if (event.keyCode === 68 && player.x < 600 ) { //d
                    player.x += player.spdX;
                } 
                if (event.keyCode === 83 && player.y < 460){ //s
                    player.y += player.spdY;
                }
                if (event.keyCode === 65 && player.x > 0) { //a
                    player.x -= player.spdX;
                }
                if (event.keyCode === 87 && player.y > 0) { //w
                    player.y -= player.spdY;
                }
            };
            }

        </script>

    </body>
</html>

当我尝试运行时，控制台会给我错误 index.php：69未捕获TypeError：无法在'CanvasRenderingContext2D'上执行'drawImage'：提供的值不是'（CSSImageValue或HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas）' 在更新（index.php：69）

我读到我需要先将它加载到内存中，但这就是我正在做的事情。

 var player = new Image();
 player.src = 'falcon1.png';

我试图像这样绘制它

ctx.drawImage(player, player.x, player.y);

有人可以帮忙吗？

Javascript Canvas ERROR index.php：69 Uncaught TypeError：无法在'CanvasRenderingContext2D'上执行'drawImage'

0 个答案: