如何使用CSS將畫布混合到背景？

Question

我有這個程序，使用戶繪製。我想要將您正在繪製的畫布疊加在背景上。

這適用於firefox，但不適用於Chrome。

http://codepen.io/anon/pen/RRBywo

這是我試圖用使CSS它的工作：

body { 

    background-image: url('http://previews.123rf.com/images/pyzata/pyzata1307/pyzata130700105/20855013-black-and-white-brick-abstract-texture-background-Stock-Photo.jpg'); 

    mix-blend-mode: normal; 

} 


canvas { 

    mix-blend-mode: overlay; 

} 

這裏是我的畫布P5JS代碼：

function setup() { 

    c = createCanvas(window.innerWidth, window.innerHeight); 

    c.position(0, 0); 

} 

var oldX = 0; 

var oldY = 0; 


function draw() { 


    if (mouseIsPressed) { 

    strokeWeight(10); 

    stroke(random(0,255),random(0,255),random(0,255)); 

    if (mouseX == oldX && mouseY == oldY) { 

     point(mouseX, mouseY); 

    } else {graffitiLine(mouseX, mouseY, oldX, oldY); 

    } 

    } 

    oldX = mouseX; 

    oldY = mouseY; 

} 

function graffitiLine(x0, y0, x1, y1) { 

    line(x0, y0, x1, y1); 

} 

function disBetween(x0,y0,x1,y1){ 

    return sqrt(((x0-x1)*(x0-x1))+((y0-y1)*(y0-y1))); 

} 

，是的，我知道圖像是醜陋的和水印的，我會稍後改變它。

Answer 1

我不知道P5太多，但你想要的東西沒有CSS是可以實現的所有：

• 首先，具有香莢蘭更換你的P5畫布。
• 在你的畫圖中，像往常一樣繼續在你的p5畫布上（現在在屏幕外），然後繪製你的背景圖像，將可見畫布globalCompositeOperation更改爲'multiply'，填充一個紅色矩形，最後繪製你的p5畫布其中一個gCO設置爲'overlay'。

而且瞧！

（這裏我轉換您的草圖 「實例模式」 之一，但它可能沒有必要...）

var c, // your p5 canvas 
 
    main, ctx, // the main canvas where we'll draw everything 
 
    img; // the background-image 
 

 
// we need to start the sketch in "instance mode" so we can have the background-image loaded 
 
var s = function(p) { 
 
    p.setup = function setup() { 
 
    c = p.createCanvas(window.innerWidth, window.innerHeight); 
 
    c.position(0, 0); 
 
    main = c.elt.cloneNode(true); 
 
    document.body.replaceChild(main, c.elt); // replace the p5 canvas with our own 
 
    ctx = main.getContext('2d'); 
 
    } 
 

 
    p.draw = function draw() { 
 

 
    if (p.mouseIsPressed) { 
 
     p.strokeWeight(10); 
 
     p.stroke(p.random(0, 255), p.random(0, 255), p.random(0, 255), p.random(0, 255)); 
 
     if (p.mouseX == p.oldX && p.mouseY == p.oldY) { 
 
     p.point(p.mouseX, p.mouseY); 
 
     } else { 
 
     graffitiLine(p.mouseX, p.mouseY, p.oldX, p.oldY); 
 
     } 
 
    } 
 
    p.oldX = p.mouseX; 
 
    p.oldY = p.mouseY; 
 

 
    drawToMain(); 
 
    } 
 

 
    function drawToMain() { 
 

 
    ctx.globalCompositeOperation = 'source-over'; 
 
    ctx.drawImage(img, 0, 0); 
 
    ctx.globalCompositeOperation = 'multiply'; 
 
    ctx.fillStyle = "red"; 
 
    ctx.fillRect(0, 0, main.width, main.height); 
 
    ctx.globalCompositeOperation = 'overlay'; 
 
    ctx.drawImage(c.elt, 0, 0); 
 

 
    } 
 

 
    function graffitiLine(x0, y0, x1, y1) { 
 
    p.line(x0, y0, x1, y1); 
 
    } 
 
}; 
 

 
function init() { 
 
    var myp5 = new p5(s); 
 
} 
 

 
img = new Image(); 
 
img.onload = init; 
 
img.src = "http://previews.123rf.com/images/pyzata/pyzata1307/pyzata130700105/20855013-black-and-white-brick-abstract-texture-background-Stock-Photo.jpg"

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/addons/p5.dom.min.js"></script>

PS：我不知道爲什麼該CSS不適用於Chrome，也許你應該在bugzilla中打開一個問題。

Answer 2

試試這個CSS：

body{ 
     background: url('http://previews.123rf.com/images/pyzata/pyzata1307/pyzata130700105/20855013-black-and-white-brick-abstract-texture-background-Stock-Photo.jpg') red; 
    background-blend-mode: multiply; 
} 

看來工作在codepen在Chrome片段。

編輯：

我誤解了這個問題。這是一個簡單的HTML5畫布小提琴：https://jsfiddle.net/hrivas/t2204vxh/ - 我還不知道足夠的P5JS。

基本上，你需要繪製圖像，並與所需的背景顏色相混合它，當它的時間來繪製，你改變混合模式（有幾種可供挑選）：

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var img = document.createElement('IMG'); 

img.src = 'http://previews.123rf.com/images/pyzata/pyzata1307/pyzata130700105/20855013-black-and-white-brick-abstract-texture-background-Stock-Photo.jpg'; 

// compose the image and the background when the image is loaded 
img.onload = function() { 
    context.globalCompositeOperation = "multiply"; 
    context.drawImage(img, 0, 0); 

    context.fillStyle = "rgba(255, 0, 0, 1)"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 
} 

document.onmousemove = function() { 
    var x = event.offsetX; 
    var y = event.offsetY; 

    // grafitti brush 
    var r = 0;//parseInt(255 * Math.random()); 
    var g = 0;//parseInt(255 * Math.random()); 
    var b = parseInt(255 * Math.random()); 
    var a = Math.random(); 

    context.fillStyle = "rgba(" + r + "," + g + "," + b + ", " + a; 
    context.globalCompositeOperation = "lighten"; 

    context.moveTo(x, y); 
    context.arc(x, y, 7, 0, 2 * Math.PI); 

    context.fill(); 
} 

其他除此之外，關閉一個或兩個顏色通道會產生不同的強度效果。

我希望這有助於！