Meteor:如何获取HTML5画布元素的上下文

Question

当试图在Meteor中定义画布元素的上下文时，我收到以下错误：Uncaught TypeError: Cannot read property 'getContext' of undefined

如果我手动将javascript代码粘贴到Chrome的控制台中，它将按预期执行，不会出现错误。这告诉我JS代码在页面加载时没有正确执行(它是在设置画布元素之前执行的)。我怎么才能解决这个问题？谢谢!

​

客户端模板：client/views/test/test.html

​

<template name="test">
  <div class="container">
    <canvas id="canvas1">Your browser does not support HTML5 Canvas. Please update your browser to the latest version.</canvas>
  </div>
</template>

客户端JS：client/views/test/test.js

$(window).load(function() {
    var canvas = $("#canvas1");
    canvas.css('width', $(window).innerWidth());
    canvas.css('height', $(window).innerHeight());
    var context = canvas[0].getContext('2d');
    // draw the canvas
});

Answer 1

问题是您正在尝试在呈现canvas之前访问它。

修正：

Template.test.rendered = function(){
    var canvas = $("#canvas1");
    canvas.css('width', $(window).innerWidth());
    canvas.css('height', $(window).innerHeight());
    var context = canvas[0].getContext('2d');
    // draw the canvas
}