未捕獲類型錯誤：無法設置爲null的'fillStyle'屬性HTML5 Javascript

我正在使用帶有Javascript的HTML5 canvas元素。現在，當我創建一個外部文件時，我可以使用內部Javascript將圖形繪製到畫布上，從而獲得未捕獲類型錯誤。我想要做的就是通過外部文件在我的畫布上繪製一個矩形。未捕獲類型錯誤：無法設置爲null的'fillStyle'屬性HTML5 Javascript

這裏是我的HTML：

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>FireBlaster</title> 
</head> 
<body style="background:#111111"> 
<div id="inner" 
><button id="drawSquareBtn" type="button">Draw Square</button> 
<canvas id="myCanvas" width="600px"; height="400px;" style=" dispaly:block; background:#000000; margin:8% 25%;" ></canvas> 
</div> 
<script type="text/javascript" src="game.js"></script> 
</body> 
</html>

這是我的javascript：

//Javascript Document 
var canvasBg = document.getElementById('myCanvas'); 
var ctx = canvasBg.getContext('2D'); 

function drawSquare(){ 

alert('your pressed a button!'); 
ctx.fillStyle = "#0A0AFF"; 
ctx.fillRect(200,150,150,50); 
} 
var drawSquareBtn = document.getElementById('drawSquareBtn'); 
drawSquareBtn.addEventListener('click', drawSquare, false);

來源

2012-12-24 Matty

在getContext("2d")需求d是小寫。

Live Demo

// Changed d to lower case 
var ctx = canvasBg.getContext('2d');

來源

2012-12-24 14:34:00 Loktar

啊，這是正確的謝謝你。 – Matty

錯： - 變種CTX = canvasBg.getContext（ '2D'）;

右：var ctx = canvasBg.getContext（'2d'）;

D資本不創建實例。

來源

2017-06-15 05:48:41

未捕獲類型錯誤：無法設置爲null的'fillStyle'屬性HTML5 Javascript

回答

相關問題