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なしで達成可能であるしないでください。

• まず、バニラの1を使用してP5のキャンバスを交換してください。
• あなたのp5キャンバス（通常は画面外）でいつものように進んでから、背景画像を描画し、表示キャンバスglobalCompositeOperationを'multiply'に変更し、赤い四角形を塗りつぶして、最後にp5キャンバスを表示しますgCOが'overlay'に設定されています。

そしてvoilà！

（ここで私は、「インスタンス・モード」1にあなたのスケッチを変換するが、それは必要ではないかもしれない...）

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>

シモンズ：私はなぜ知りませんCSSはクロームでは機能しません。おそらくあなたはそこに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; 
} 

Chromeでcodepenスニペットで動作しているようです。

EDIT：

私は質問を誤解。プレーンな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(); 
} 

その他に1つまたは2つのカラーチャンネルをオフにすると、変化する輝度効果が生成されます。

こちらがお役に立てば幸いです。