0

サンプルコードを見つけたので、プラグインするだけでいいと思いましたが、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 */
}

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

You have copied code from Example code but you have mixed up jQuery selector and javascript DOM selector that's why it is not working

Try this one using javascript dom selector

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

or Try this one using jQuery selector

      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 に答える