使用drawImage()在html画布中绘制p5.js画布
使用drawImage()在html画布中绘制p5.js画布
提问于 2018-06-21 18:54:24
我尝试使用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);
回答 1
Stack Overflow用户
发布于 2018-06-22 07:58:57
p5.js画布是一个特殊的p5.js对象。如果使用console.log(yourp5canvas)，您会注意到它输出了一个d.Renderer2D对象，并将实际的HTMLcanvas和HTMLcanvas上下文存储在p5js对象中。
下面是关于如何将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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50966769
复制相关文章
相似问题