Question

我只想尝试在画布中获取图像，但由于某种原因，它不会出现。

我认为这个问题依赖于我如何调用该函数，因为我没有得到可能出错的内容。

有问题的代码从// 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>

Answer 1

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

为什么我指定的图像不会出现在画布上？

1 个答案: