javascript - 对 canvas 元素之外的元素使用 globalCompositeOperation

Question

我正在尝试使用globalCompositeOperation在 <canvas> 内的对象上元素，但我的目标是与 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();

代码笔:http://codepen.io/jeremypbeasley/pen/NqwGoO

Answer 1

globalCompositeOperation 混合操作定义 Canvas 元素支持的像素如何与要写入该支持的片段混合。这与网页其他维度(例如 DOM)中的像素无关。 Canvas 发生完全光栅化，并且某些其他图形系统将 Canvas 的像素合成到网页其余部分的像素上。网页的回流可能随时发生，但这并不意味着 Canvas 将被重新光栅化，只是重新合成，在这种情况下，globalCompositeOperation 将不起作用，您将不会没有看到您想要的照片负片效果。