使用 drawImage() 在 html 画布内绘制 p5.js 画布

Question

我正在尝试使用 drawImage() 将 p5.js 画布绘制到 html 画布中，但每次都会出错：

未捕获的类型错误：无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是类型“（CSSImageValue 或 HTMLImageElement 或 SVGImageElement 或 HTMLVideoElement 或 HTMLCanvasElement 或 ImageBitmap 或 OffscreenCanvas）”

var cnv;
var counterUp = 1;

var canvas2d = document.getElementById('canvas');
var context = canvas2d.getContext('2d');

var p5Canvases = document.getElementById('defaultCanvas0');


function setup() {
  pixelDensity(1);
  cnv = createCanvas(1062, 600);
  cnv.parent('p5Container');

}

function draw() {
  background(50,0,0);
  rect(50 + counterUp,50,50,50);

if (truer) {
  if (counterUp < 100) {
    counterUp = counterUp + 1;
  }
}

  context.rect(0,0,canvas2d.width,canvas2d.height);
  context.stroke();
  context.fillStyle = "white";
  context.fill();
  context.beginPath();
  context.arc(100, 200 + counterUp, 40, 0, 2 * Math.PI);
  context.stroke();
  context.fillStyle = "red";
  context.fill();
}

context.drawImage(p5Canvases, 20, 10);

Answer 1

p5.js 画布是一个特殊的 p5.js 对象。如果你使用 console.log(yourp5canvas) 你会注意到它输出了一个 d.Renderer2D 对象，并且确实在 p5js 对象中存储了实际的 HTMLcanvas 和 HTMLcanvas 上下文。

这里有一个关于如何将 p5 画布复制到 html 画布上的 jsfiddle。 html 画布有黑色边框。

->https://jsfiddle.net/ozsLtxhb/261/

将它移到新画布后尺寸有点奇怪，但希望你能弄明白它。

祝你好运！ :)

function setup() {
        var HTMLcanvas = document.getElementById("my-canvas");
    var HTMLcontext = HTMLcanvas.getContext("2d");

    var canvas1 = createCanvas(200, 200);
    console.log(canvas1);
      //gives you "d.Renderer2D" object
    var real_canvas = canvas1.canvas;

    background(200);
    text("p5.js canvas", 10, 10);

        HTMLcontext.drawImage(real_canvas, 0, 0);
}