繰り返し問題があります。キャンバス要素 (既に HTML にある) の 2d コンテキストにアクセスして画像を描画しようとすると、null に描画できないというコンソール エラーが表示されます。(null のメソッド 'drawImage' を呼び出すことはできません) 私は 3 回目の書き直しを行っており、現在は JS で jquery を使用しています。HTML内でスクリプトを移動しようとしました。理解できません。DOM の準備ができているので、canvas 要素は既に存在しているのではないでしょうか?
$(document).ready(function(){
function setup(){
var canvas = document.getElementById("canv1");
console.log(canvas.toString());
//this grabs hold of the canvas api
var canvcontext = canvas.getContext('2D');
console.log(canvcontext.toString());
burpy = new Image();
burpy.onload = canvcontext.drawImage(burpy,400,100);
burpy.src = 'burpy.png';
};
setup();
});
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>JAVASCRIPT TEST</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="jquery.js" type="text/javascript"></script>
<script src="parse.js" type="text/javascript"></script>
</head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<body id="body">
Silly video games
<br>
<canvas id="canv1" width="200" height="100"
style="border:1px solid #000000;"></canvas>
<div id="canvwrap">
</div>
</body>
</html>
助けてください！