未被捕獲的TypeError：在zoom.html：8處無法讀取null的屬性“ getContext”

Question

我正在嘗試創建圖像縮放，如果您將鼠標懸停在圖像上，則將其縮放到定義的寬度。 沿線我越來越

Uncaught TypeError: Cannot read property 'getContext' of null
    at zoom.html:8

在我的html文件中。 這是我遇到的html文件的摘要

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    iw, ih;

在html文件的主體中，我有以下代碼段

<canvas width="310" height="305" id="canvas">Sorry, no canvas available</canvas>
<a id="download" download="download.jpg">Download as image</a>

這是我制作的一個小樣的演示

http://plnkr.co/edit/0G93qmVeUWby0SRIp5Br

請問可能有什么問題嗎？

Answer 1

您正在嘗試在DOM中加載元素之前對其進行訪問。 比較這兩個示例：

 <script> console.log(document.getElementById('canvas')); </script> <canvas id="canvas"></canvas>

 <canvas id="canvas"></canvas> <script> console.log(document.getElementById('canvas')); </script>

您可能已經接過，解決方案是在頁面加載后即 <body>的底部運行腳本。