Question

我知道这个问题不止一次被问过，但是我发现的答案似乎并不适用于我的情况......我是JavaScript的新手，甚至在调试它时更是如此。我试图通过在线教程进行精益求精，但是当我尝试onclick事件时，一切看起来都是空的 - 该函数应该调整画布大小并将图像放在第一次单击的左上角。做什么是在第一次点击时调整画布大小，然后在第3次点击，添加图像...因为我没有调用样式或显示（据我所知），并且函数中没有条件语句，我不确定为什么会这样。我也试图链接功能而不是内联，如另一篇文章所建议，但无济于事......我正在使用Chrome。任何意见都将非常感谢！

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>

JS：

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;
}

Answer 1

在插入图像之前必须等待图像加载：

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);
    }
}

onclick需要3次点击才能完成活动

1 个答案: