Question

我一直在尝试实现imgOnClick（elmt）函数，以便它绘制（到画布的drawImage（）方法上）elmt给定的图像。 elmt将是一个标记对象。画布的ID为imgresult。同样在文档就绪功能中，让每个缩略图图像将其点击事件设置为imgOnClick（）函数。

无论我如何设置代码，它都不会起作用，而且我不确定如何执行此操作

<!DOCTYPE html>
    <html>
    <head>
        <link rel=stylesheet type="text/css" href="memeory.css">
        <title>Meme-ory :: Javascript Meme Generator</title>
        <script type="application/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <script>
        $( document ).ready(function() {

            // TODO: set up the click events for the thumbnails
            $('#imagegallery').button.click(function){

            }

            // TODO: set up the click event for the button
        });

        // TODO: function called when a thumbnail is clicked
        function imgOnClick(elmnt) {
           var curImage = document.getElementById('memeresult');
           var thePath = 'images/';
           var theSource = thePath + elmnt;
           canvas.drawImage(elmnt, 10, 10);
        };

        // TODO: function called when the button is clicked
        function buttonOnClick() {

        };

    </script>
</head>

<body>
    <header>
        <h1>Meme-ory: Raging on in the Moonlight!</h1>
    </header>

    <main>


        <div id="controls">
            <form>
                <label for="toptext">Top Text:</label>
                <input id="toptext" type="text">

                <label for="bottomtext">Bottom Text:</label>
                <input id="bottomtext" type="text">

                <input id="createMemeButton" type="button" value="Give me Meme!">
            </form>
        </div>

        <div id="imagegallery">
            <img class="thumbnail" id="closeenough" src="closeenough.png" alt="close enough">
            <img class="thumbnail" id="cutenessoverload" src="cutenessoverload.png" alt="cuteness overload">
            <img class="thumbnail" id="deskflip" src="deskflip.png" alt="deskflip">
            <img class="thumbnail" id="lol" src="lol.png" alt="LOL">
            <img class="thumbnail" id="trollface" src="trollface.png" alt="troll face">
        </div>

        <div id="memeresult">
            <canvas id="imgresult">
            </canvas>
        </div>
    </main>
</body>

HTML将图像绘制到画布

0 个答案: