2015-06-23 3 views
1

Так что я пытаюсь использовать globalCompositeOperation для объекта в элементе <canvas>, но моя цель состоит в том, чтобы смешать объект с видом холста - простой элемент разметки html как абзац.Использовать globalCompositeOperation с элементами вне элемента canvas

Моя конечная цель будет переворачивая содержимое на странице с помощью difference как так enter image description here

Мой существующий код ниже. Возможно ли это?

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

ответ

0

В globalCompositeOperation смешивание операции определяют, как пиксели, поддержанный холст элемент смеси с фрагментами, которые будут записаны на эту подложку. Это не имеет ничего общего с пикселями, которые живут в каком-то другом измерении веб-страницы, например DOM. Общая растеризация холста происходит, и какая-то другая графическая система компонует пиксели холста на пикселях остальной части веб-страницы. Рефляция веб-страницы может произойти в любое время, но это не означает, что холст будет повторно растрирован, просто перекомпонован, и в этом случае globalCompositeOperation s не будет иметь эффекта, и вы не увидите негативного эффекта фотографии ты желаешь.

Смежные вопросы