2

globalCompositeOperation (または「乗算」カラー操作を提供する他のプラグイン) をjCanvas jQuery プラグインに統合するにはどうすればよいですか?

// How do I get this working? //
var ctx = document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'darker';

// With this - //
$("canvas").drawArc({
  fillStyle: "#c7302a",
  x: 100, y: 100,
  radius: 50
});

$("canvas").drawArc({
  fillStyle: "#395797",
  x: 170, y: 100,
  radius: 50,
  opacity: 1
});
4

2 に答える 2

2

レコードについては、jCanvas にはcompositingプロパティがあり、その値は にマップされctx.globalCompositeOperationます。

$("canvas").drawArc({
  fillStyle: "#c7302a",
  x: 100, y: 100,
  radius: 50,
  compositing: 'darker'
});

-カレブ

于 2013-07-17T18:03:08.783 に答える
1

さて、私はそれを解決しました。何時間も格闘した結果、あまりにも単純すぎました。コンテキスト ブレンダープラグインを使用しました。

JS コード:

$("#canvasReal").drawArc({ // Draw on the real canvas
  fillStyle: "#c7302a",
  x: 100, y: 100,
  radius: 50
});

$("#canvasOff").drawArc({ // Draw on the off screen canvas
  fillStyle: "#395797",
  x: 150, y: 100,
  radius: 50
});

// Blend off-screen canvas onto the real canvas
    var over = canvasOff.getContext('2d'); 
    var under = canvasReal.getContext('2d');
    over.blendOnto(under,'multiply');

HTML コード:

<canvas width="500" height="250" id="canvasReal"></canvas>
<canvas width="500" height="250"id="canvasOff" style="display:none;"></canvas>
于 2013-01-31T14:11:45.993 に答える