Question

我正在尝试使用drawImage（）将p5.js画布绘制为html画布，但是每次都会出错：

未捕获的TypeError：无法在'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画布的技巧。 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);
}

使用drawImage（）在HTML画布内绘制p5.js画布

1 个答案: