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

Question

我找到了 example code 并且我觉得很不错，我只需要插入它，但我是 Meteor 的新手，希望我只是犯了一些简单的天真的错误。我认为 jquery 已经包含在 Meteor 中，如果我在 "Client" 代码部分使用 $ 或 document.getElementById 它会起作用，但我要么为后者得到一个 null 和一个$ 没有为前者定义 :(

我在 post.

中尽量使我的代码简洁

这是我项目中用于屏蔽的 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>

UPDATE 我能够通过使用 Salman 的 Template.applicationLayout.onRendered() 函数然后使用 anomepani javascript dom 选择器代码来实现它并将 id="canvas" 添加到我的 canvas 对象。谢谢大家的帮助，我希望我能把两个都标记为答案。

Answer 1

您需要在 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);
        }
    });
}

Answer 2

您从 Example code 复制了代码，但混淆了 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);
      }

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

Cannot figure out how to get css/js masking code to work in meteor

html

javascript

jquery

meteor

image-masking