onclick требуется 3 клика для завершения события

Я знаю, что этот вопрос задавался несколько раз, но ответы, которые я нашел, похоже, не применимы к моей ситуации ... Я очень новичок в JavaScript, и тем более при его отладке. Я пытаюсь наклониться, работая через онлайн-учебник, но когда я попробовал событие onclick, сначала все кажется нулевым - функция должна изменить размер холста и поместить изображение в левом верхнем углу первого щелчка. Что делает, это изменение размера холста при первом щелчке, а затем на третьем щелчке, добавление изображения ... Так как я не называю стиль или отображение (насколько мне известно), и в функции нет условных операторов, Я не знаю, почему это происходит. Я также попытался связать функцию вместо встроенного, как было предложено другим сообщением, но безрезультатно ... Я использую Chrome. Любой вход был бы признателен!onclick требуется 3 клика для завершения события

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="js/main.js"></script> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
<canvas id="gameCanvas" onclick="changeCanvasSize(this);" width = "400" height = "300"></canvas> 
</body> 
</html>

ЯШ:

function changeCanvasSize() 
{ 
    var gameCanvas = document.getElementById("gameCanvas"); 
    var avatarImage = new Image(); 

    gameCanvas.width = 600; 
    gameCanvas.height = 800; 

    avatarImage.src = "img/avatar.png"; 
    gameCanvas.getContext("2d").drawImage(avatarImage, 0, 0); 
}

CSS:

body { 
    background: #ffffff; 
    text-align: center; 
    padding: 20px; 
    color: #575757; 
    font: 14px/21px Arial,Helvetica,sans-serif; 
} 

a { 
    color: #B93F14; 
} 

a:hover { 
    text-decoration: none; 
} 

ol { 
    width: 600px; 
    text-align: left; 
    margin: 15px auto 
} 

canvas { 
    border: 1px solid black; 
}

источник

2015-11-18 Odysseus

Не могли бы вы рассказать нам, какой учебник вы используете? Мне любопытно, почему размер холста будет изменяться, когда вы нажимаете внутри холста вместо другого элемента. – Chad

вы должны ждать изображение для загрузки, прежде чем вставить его:

function changeCanvasSize() 
{ 
    var gameCanvas = document.getElementById("gameCanvas"); 
    var avatarImage = new Image(); 

    gameCanvas.width = 600; 
    gameCanvas.height = 800; 

    avatarImage.src = "img/avatar.png"; 
    avatarImage.onload = function() { 
     gameCanvas.getContext("2d").drawImage(avatarImage, 0, 0); 
    } 
}

источник

2015-11-18 17:19:34 Macmee

Большое спасибо Макми! Это то, о чем даже не говорилось в учебнике. Это ответ. – Odysseus

onclick требуется 3 клика для завершения события

ответ

Смежные вопросы