Javascript jCanvas的GlobalComposite运营
我如何将globalCompositeOperation(或任何其他将为我提供“颜色操纵”的插件)集成到jQuery插件中Javascript jCanvas的GlobalComposite运营,javascript,jquery,canvas,jcanvas,globalcompositeoperation,Javascript,Jquery,Canvas,Jcanvas,Globalcompositeoperation,我如何将globalCompositeOperation(或任何其他将为我提供“颜色操纵”的插件)集成到jQuery插件中 // How do I get this working? // var ctx = document.getElementById('canvas').getContext('2d'); ctx.globalCompositeOperation = 'darker'; // With this - // $("canvas").drawArc({ fillStyle
// 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
});
好吧,我解决了。经过几个小时的努力,事情太简单了: 我使用了插件 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>
对于记录,jCanvas有一个
合成
属性,其值映射到ctx.globalCompositeOperation
$("canvas").drawArc({
fillStyle: "#c7302a",
x: 100, y: 100,
radius: 50,
compositing: 'darker'
});
-Caleb迟到总比不到好?