Question

我有一个反复出现的问题。每当我尝试访问我的canvas元素的2d上下文（已经在我的html中）来绘制图像时，我得到一个控制台错误，告诉我我无法绘制为null。（不能调用null的方法'drawImage'）我正在进行第三次重写，现在在JS中开始使用jquery。尝试在html中移动脚本。我不明白。当然，canvas元素已经存在，因为DOM已准备好了吗？

$(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>

请帮忙！

Answer 1

尝试使用canvas.getContext('2d');代替canvas.getContext('2D');

Canvas始终为null

1 个答案: