0

我找到了示例代码，我想我只需要把它插入就可以了，但我是 Meteor 的新手，我希望只是犯一些简单的幼稚错误。我认为 jquery 已经包含在 Meteor 中，并且如果我在“客户端”代码部分中使用 $ 或 document.getElementById 它将起作用，但我要么为后者得到一个空值，而为前者定义 $ ： (

在这篇文章中，我试图使我的代码尽可能简洁。

这是我项目中用于屏蔽的 javascript 代码：

 if (Meteor.isClient) {

  var canvas = document.getElementById("canvas");;
  if (canvas[0].getContext) {
      var context = $canvas[0].getContext('2d');
      context.fillStyle = 'red';
      context.fillRect(10, 10, 300, 60);
  }
}

这是相关的css代码：

#box {
    width: 150px;
    height: 150px;
    background-color: blue;
    border-radius: 50px;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

html代码：

<template name="applicationLayout">
<div id = "backgroundDiv">
</div>

<div id="box">
  <canvas id="canvas" width="300px" height="300px"></canvas>
</div>
<div style="width: 40%">
  <header>
      {{> logoFloat}}
      {{> navbar}}
  </header>
  {{> yield}}
  {{> footer}}
</div>

更新我能够通过使用 Salman 的 Template.applicationLayout.onRendered() 函数和 anomepani javascript dom 选择器代码并将 id="canvas" 添加到我的画布对象来使其工作。谢谢你们的帮助，我希望我能将两者都标记为答案。

4

2 回答 2

2

您需要将客户端代码包装在onRendered方法中

if (Meteor.isClient) {
    Template.applicationLayout.onRendered(function(){
        var $canvas = document.getElementById("canvas");
        if (canvas[0].getContext) {
            var context = $canvas[0].getContext('2d');
            context.fillStyle = 'red';
            context.fillRect(10, 10, 300, 60);
        }
    });
}
于 2016-03-07T05:29:21.930 回答
1

您已经从示例代码中复制了代码，但是您混淆了 jQuery 选择器和 javascript DOM 选择器，这就是它不起作用的原因

使用 javascript dom 选择器试试这个

var canvas = document.getElementById("canvas");;
  if (canvas.getContext) {
      var context = canvas.getContext('2d');
      context.fillStyle = 'red';
      context.fillRect(10, 10, 300, 60);
  }

或使用 jQuery 选择器试试这个

      var $canvas = $("#canvas");
        //you can create variable canvas instead '$canvas' both works
      if ($canvas[0].getContext) {
          var context = $canvas[0].getContext('2d');
          context.fillStyle = 'red';
          context.fillRect(10, 10, 300, 60);
      }
于 2016-03-07T12:27:42.020 回答