0

このプラグインを使用してキャンバスベースのサイトメニューを作成し、「乗算」効果を作成したいと思います。ただし、これとglobalCompositeOperationは、同じキャンバス内のctxオブジェクトで機能しています。（コンテキストブレンダーでは、オフスクリーンキャンバスを使用し、その描画情報を使用します。globalcompoperationは同じctxをブレンドします）。ctxオブジェクトごとにマウスイベント（ホバーとクリック）を作成したいので、ctxごとに異なるURLになります。

これが私のテストです：

      function draw(){
      var ctx = document.getElementById('canvasOff1').getContext('2d');
      var ctx2 = document.getElementById('canvasReal').getContext('2d');
      var ctx3 = document.getElementById('canvasOff3').getContext('2d');

      // draw circles - each circle should link to different url and has its own focus
      ctx.fillStyle = "#c7302a";
      ctx.beginPath();
      ctx.arc(50,75,35,0,Math.PI*2,true);
      ctx.fill();

      ctx2.fillStyle = "#395797";
      ctx2.beginPath();
      ctx2.arc(100,75,35,0,Math.PI*2,true);
      ctx2.fill();

  ctx3.fillStyle = "#454";
      ctx3.beginPath();
      ctx3.arc(150,75,35,0,Math.PI*2,true);
      ctx3.fill();

    var over = canvasOff1.getContext('2d'); 
    var under = canvasReal.getContext('2d');
    over.blendOnto(under,'multiply');

    var over2 = canvasOff3.getContext('2d'); 
    var under2 = canvasReal.getContext('2d');
    over2.blendOnto(under2,'multiply',{destX:0,destY:0});
    }

ここでjQueryを実装する方法を知っておくと便利です。ありがとう。

4

1 に答える 1

2

イベントリスナーをコンテキストに追加することはできません。キャンバスにのみ追加できます。

document.getElementById('canvasOff1').addEventLsitener(
    'click',
    function(){ goToUrl('http://www.test1.com'); }
);
document.getElementById('canvasReal').addEventLsitener(
    'click',
    function(){ goToUrl('http://www.test2.com'); }
);
document.getElementById('canvasOff3').addEventLsitener(
    'click',
    function(){ goToUrl('http://www.test3.com'); }
);

function goToUrl(url){
    window.location = url;
}

または、jQueryを使用する場合：

$('#canvasOff1').on(
    'click',
    function(){ goToUrl('http://www.test1.com'); }
);
$('#canvasReal').on(
    'click',
    function(){ goToUrl('http://www.test2.com'); }
);
$('#canvasOff3').on(
    'click',
    function(){ goToUrl('http://www.test3.com'); }
);

function goToUrl(url){
    window.location = url;
}

（私はのために別の関数を使用することを好みwindow.location = Xますが、もちろん、あなたは次のonclickように関数でもそれを使用します：

function(){ window.location = 'http://www.test1.com'; }
于 2013-01-30T08:27:31.707 に答える