无法弄清楚如何让 css/js 掩码代码在 meteor 中工作

Question

我找到了示例代码，我认为我只需要插入它，但我是 Meteor 的新手，我希望我只是犯了简单的幼稚错误。我认为jquery已经包含在Meteor中，如果我在"客户端"代码部分中使用$ 或 document.getElementById，它会起作用，但我要么为后者获取 null，要么为前者定义 $:(

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

这是我项目中屏蔽的 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 */
}

网页代码：

<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"添加到我的canvas对象中，从而使它工作。谢谢你们的帮助，我希望我能将两者都标记为答案。

Answer 1

你需要在

onRender 方法中包装你的客户端代码

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);
        }
    });
}

Answer 2

您已经从示例代码中复制了代码，但是您混淆了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);
      }