将globalCompositeOperation与canvas元素之外的元素一起使用

Question

所以我试图在globalCompositeOperation元素中的对象上使用<canvas>，但我的目标是与画布的对象进行混合 - 一个简单的html标记元素，如段落

我的最终目标是使用difference反转页面上的内容，如

我现有的代码如下。这甚至可能吗？

var canvas = document.getElementById('canvas');
window.onresize=function(){
  "use strict";
  var winMin = Math.min(window.innerWidth,window.innerHeight);
  canvas.width = winMin;
  canvas.height = winMin;
  var w = winMin / 3;
  var ctx = canvas.getContext('2d');
  ctx.globalCompositeOperation = 'multiply';
  ctx.globalAlpha = .5;
  //magenta
  ctx.fillStyle = 'rgb(255,0,255)';
  ctx.beginPath();
  ctx.arc(w, w, w, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();
  //cyan
  ctx.fillStyle = 'rgb(0,255,255)';
  ctx.beginPath();
  ctx.arc(w*2, w, w, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();

};
window.onresize();

Codepen：http://codepen.io/jeremypbeasley/pen/NqwGoO

Answer 1

globalCompositeOperation混合操作定义canvas元素支持的像素如何与片段混合以写入该支持。这与生活在网页的其他维度（如DOM）中的像素无关。画布的总光栅化发生，并且一些其他图形系统将画布的像素合成到网页其余部分的像素上。网页的回流可能随时发生，但这并不意味着画布将被重新栅格化，只是重新合成，在这种情况下globalCompositeOperation s将没有效果，你不会看到你想要的照片负面效果。