将 globalCompositeOperation 与画布元素之外的元素一起使用答案

【问题标题】：Use globalCompositeOperation with elements outside of canvas element将 globalCompositeOperation 与画布元素之外的元素一起使用
【发布时间】：2015-06-23 16:10:41
【问题描述】：

所以我尝试在 <canvas> 元素内的对象上使用 globalCompositeOperation，但我的目标是与画布外的对象混合 - 一个普通的 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

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案1】：

globalCompositeOperation 混合操作定义了画布元素支持的像素如何与要写入该支持的片段混合。这与存在于网页其他维度（如 DOM）中的像素无关。画布完全光栅化，其他一些图形系统将画布的像素合成到网页其余部分的像素上。网页的重排可能随时发生，但这并不意味着画布会被重新光栅化，只是重新合成，在这种情况下，globalCompositeOperations 将不起作用，您将看不到照片你想要的负面影响。

【讨论】：