jCanvas 上的 globalCompositeOperation答案

【问题标题】：globalCompositeOperation at jCanvasjCanvas 上的 globalCompositeOperation
【发布时间】：2013-01-14 19:05:56
【问题描述】：

如何将 globalCompositeOperation（或任何其他可以给我'multiply'颜色操作的插件）集成到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
});

【问题讨论】：

标签： javascript jquery canvas jcanvas globalcompositeoperation

【解决方案1】：

作为记录，jCanvas 有一个compositing 属性，其值映射到ctx.globalCompositeOperation。

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

-迦勒

【讨论】：

迟到总比不到好？

【解决方案2】：

好的，我解决了。在挣扎了几个小时之后，它太简单了：我使用了context blender 插件。

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>

【讨论】：