Canvas Js函数未触发，给出null错误 [英] Canvas Js Function not firing,giving null error
问题描述
<！DOCTYPE html>
< html lang =en>
< head runat =server>
< title>< / title>
< meta http-equiv =X-UA-Compatiblecontent =IE = Edge//>
< script type =text / javascript >
var c = document.getElementById（myCanvas）;
var ctx = c.getContext（2d）;
var grd = ctx.createLinearGradient（0,0,175,50）;
grd.addColorStop（0，＃FF0000）;
grd.addColorStop（1 ，＃00FF00）;
ctx.fillStyle = grd;
ctx.fillRect（0,0,175,50）;
< / script>
< / head>
< body>
< form id =form1runat =server>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"//>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 175, 50);
grd.addColorStop(0, "#FF0000");
grd.addColorStop(1, "#00FF00");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 175, 50);
</script>
</head>
<body>
<form id="form1" runat="server">
< canvas id =myCanvaswidth =200height =100
style = border：1px solid＃000000;>
< / canvas>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
< / form>
< / body>
< / html> ;
我还需要做什么呢？我正在使用2010安装SP1.HTML5 intellisense来自页面而不是JS。
</form>
</body>
</html>
what else I need to do in this? I''m using 2010 where I install SP1.HTML5 intellisense is coming on page but not in JS.
推荐答案
您的脚本位于将运行它的标题中一旦加载 - 这是在将canvas元素添加到文档之前。
您需要等到文档加载后再尝试使用getElementById （）。最简单的方法是将代码包装在onload处理程序中：
Your script is in the header where it will be run as soon as it is loaded - which is before the canvas element has been added to the document.
You need to wait until the document has loaded before trying to use getElementById(). The easiest way is to wrap your code in an onload handler:
window.onload = function() {
var c = document.getElementById("myCanvas");
...
... // more code here...
}
这篇关于Canvas Js函数未触发，给出null错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
