如何将画布与背景与CSS混合？

我有一个可以让用户画画的程序。我希望你正在绘制的画布覆盖在背景上

这在firefox中有效，但在chrome中无效

这是我尝试使用的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)));

}

---

是的，我知道图像很难看并且有水印，我稍后会更改它。

我不太了解p5，但是您想要的是完全没有CSS的情况下可以实现的：

• 首先，将p5画布替换为普通画布
• 在绘图中，像往常一样在p5画布上继续（现在屏幕外），然后绘制背景图像，将可见画布

  globalCompositeOperation

  更改为

  'multiply'

  ，填充一个红色矩形，最后在可见画布上绘制p5画布，gCO仍设置为

  'overlay'

瞧

（在这里，我将您的草图转换为“实例模式”，但可能没有必要……）

var c，//您的p5画布
main，ctx，//我们将在其中绘制所有内容的主画布
img；//背景图像
//我们需要以“实例模式”启动草图，以便加载背景图像
var s=函数（p）{
p、 setup=函数setup（）{
c=p.createCanvas（window.innerWidth，window.innerHeight）；
c、 位置（0,0）；
main=c.elt.cloneNode（真）；
document.body.replaceChild（main，c.elt）；//用我们自己的画布替换p5画布
ctx=main.getContext（'2d'）；
}
p、 draw=函数draw（）{
如果（按第页）{
p、 冲程重量（10）；
p、 笔划（p.random（0255）、p.random（0255）、p.random（0255）、p.random（0255））；
if（p.mouseX==p.oldX&&p.mouseY==p.oldY）{
p、 点（p.mouseX，p.mouseY）；
}否则{
涂鸦（p.mouseX，p.mouseY，p.oldX，p.oldY）；
}
}
p、 oldX=p.mouseX；
p、 oldY=p.mouseY；
拉丝托曼（）；
}
函数drawToMain（）{
ctx.globalCompositeOperation='source over'；
ctx.drawImage（img，0,0）；
ctx.globalCompositeOperation='multiply'；
ctx.fillStyle=“红色”；
ctx.fillRect（0，0，main.width，main.height）；
ctx.globalCompositeOperation='overlay'；
ctx.drawImage（c.elt，0,0）；
}
函数涂鸦（x0，y0，x1，y1）{
p、 线（x0，y0，x1，y1）；
}
};
函数init（）{
var myp5=新的p5；
}
img=新图像（）；
img.onload=init；
img.src=”http://previews.123rf.com/images/pyzata/pyzata1307/pyzata130700105/20855013-black-and-white-brick-abstract-texture-background-Stock-Photo.jpg“

试试这个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中的代码笔代码段中似乎可以使用

编辑：

我误解了这个问题。这里有一个简单的HTML5画布小提琴：--我还不知道足够的P5J

基本上，您需要绘制图像并将其与所需的背景颜色混合，在绘制时，您可以更改混合模式（有几种可供选择）：

除此之外，关闭一个或两个颜色通道会创建不同的强度效果

---

我希望这有帮助

我想你错过了这个问题，这里是一个固定的代码笔OP的问题与铬（比较它与FF）我知道，他想混合背景图像与图纸。我来试一试。然后它就变成了我答案的一个副本，不是吗？好吧，似乎OP想要使用p5，而且，你应该记得在每个新的路径图上调用ctx.beginPath，否则你会用新颜色填充以前绘制的所有弧，这将在最后产生丑陋的工件，而不是OP代码中正确的每弧一色特性。这很公平。我已经删除了小提琴v1上的路径——这是以前一些线条绘制尝试中留下的。谢谢

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();
}