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>的底部。