我只是想在 Canvas 内获取图像，但是由于某种原因，它没有出现。
我认为问题在于我如何调用该函数，但我不知道可能出了什么问题。
有问题的代码从//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/