我只是想在画布里面得到一个图像,但是,由于某些原因,它没有出现。
我认为问题在于我如何调用函数,但我不知道可能出了什么问题。
有问题的代码从//Imagen开始
代码如下:

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>CH1EX1: Basic Hello World HTML Page</title>

    <script src="scripts/modernizr.js"></script>

    <script type="text/javascript">

        window.addEventListener("load", eventWindowLoaded);
        var Debugger = function() {};

        Debugger.log = function (message){
            try{
                console.log(message);
            } catch (exception){
                return;
            }
        }

        function eventWindowLoaded(){
            canvasApp();
        }

        function canvasSupport(){
            return Modernizr.canvas;
        }

        var theCanvas = document.getElementById("canvasOne");


        function canvasApp(){

            if(!canvasSupport()){ //Checa soporte del navegador para Canvas
                return;
            }

            var theCanvas = document.getElementById("canvasOne"); //Encuentra y asigna a la variable el Canvas (con ese id)
            var context = theCanvas.getContext("2d"); //Usaremos el contexto 2D, por lo que se hace ésto, y usaremos context para modificar nuestro canvas.

            Debugger.log("Dibujando el Canvas");

            function dibujarPantalla(){

                //Fondo
                context.fillStyle = "#ffffaa";
                context.fillRect(0, 0, 800, 600);

                //Texto
                context.fillStyle = "#000000";
                context.font = "20px _sans";
                context.textBaseline = "top";
                context.fillText("Óscar A. Montiel", 800/2, 300);

                //Imagen
                var imagen = new Image();
                imagen.src = "dog.jpg";
                Debugger.log("Dibujando imagen.")

                var imagenDibujada = false;
                imagen.onLoad = function(){// cuando se carga
                    context.drawImage(imagen, 0, 0);
                    imagenDibujada = true;
                    Debugger.log("Imagen dibujada");
                }
                if(imagenDibujada === false){
                    Debugger.log("La imagen no se dibujó.");
                }

                //Caja
                context.strokeStyle = "#000000";
                context.strokeRect(5, 5, 800, 600);
            }

            dibujarPantalla();

            Debugger.log("Pantalla dibujada.")

        }



    </script>


</head>
<body>
    <div style="position: absolute; top: 50px; left: 50px">
    <canvas id="canvasOne" width="1280" height="720">
        <!-- Mensaje que aparece cuando el navegador no soporta Canvas -->Eres un vejestorio usando navegadores medievales. ¡Actualízate!
    </canvas>

    </div>




</body>
</html>

最佳答案

imagen.onLoad应更改为imagen.onload。全部小写。

关于javascript - 为什么我指定的图像没有出现在 Canvas 上?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32533435/

10-12 14:22