0
私はhtmlとjavascriptを初めて使用しています。画像ギャラリーから画像を呼び出してキャンバスに画像を追加しようとしています。私はスクリプトにonclickメソッドを使用しているので、私は苦労しているように動作していません。私は下に私のコードを追加しました。ご協力ありがとうございました！割り当ての質問...サムネイル画像ギャラリーのキャンバスに画像を追加できません
elmtによって与えられたイメージを（キャンバスのdrawImage（）メソッドに）ペイントするようにimgOnClick（elmt）関数を実装します。 elmtはタグオブジェクトになります。キャンバスにはid imgresultがあります。
ドキュメントレディ機能では、各サムネイルイメージにclickイベントをimgOnClick（）関数に設定させます。残りのイメージ用に実装する前に、このイメージをテストすることをお勧めします。イメージを使用可能なサイズに拡大縮小してください。
<pre> <code><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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() {
$('.thumbnail').click(imgOnClick('img'){
});
});
function imgOnClick('img') {
var canvas = document.getElementById("imgresult");
var ctx = canvas.getContext("2d");
var img = document.getElementById("closeenough");
ctx.drawImage(img, 10, 10);
};
};
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>
htmlも追加してください。 – Difster
html –
2件の質問： 1.コンソールに何かエラーがありますか？ 2. jQueryを使用している場合、なぜイベントリスナーにjQueryメソッドを使用していないのですか？ – Difster