Question

我想要一个HTML画布上下文，我可以绘制并在屏幕外阅读（在这个例子中，写文本和阅读创建的形状，但这是一个普遍的问题）。我可能还想使用画布作为屏幕外帧缓冲。

我想我可以创建一个隐藏的DOM元素，但我宁愿用JavaScript创建它（我可能想在运行时创建并销毁一些画布）。

可能的？

Answer 1

您可以使用canvas创建新的document.createElement元素：

var canvas = document.createElement('canvas');

然后从中获取上下文。只需确保设置width和height即可。您不必将画布添加到树中以使其工作：

DEMO

但你必须创建该节点。您可以为此创建一个函数：

function createContext(width, height) {
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    return canvas.getContext("2d");
}

但这就是我的能力结束的地方......无论你是否可以某种方式将一个背景转移到另一个背景或画布，我都不知道......

Answer 2

它的旧版但是如何用toDataURL保存一个画布并使用drawImage复制到另一个画布。你也可以使用保存和恢复来制作帧缓冲区

    function createCanvas(width, height) {
    var c = document.createElement('canvas');
    c.setAttribute('width', width);
    c.setAttribute('height', height);
    return c;
}

function canvasImg(canvas) {
    var ctx = canvas.getContext('2d');
    ctx.fillRect(0,0,canvas.width, canvas.height);
    var img = canvas.toDataURL('image/png');

    return img;
}

function placeImage(canvas, img) {
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0,0);
}

window.onload = function(){
    var canvas = createCanvas(400, 400);
    var hiddenCanvas = createCanvas(400,400);
    var i = canvasImg(hiddenCanvas);
    var img = new Image();
    img.src = i;
    placeImage(canvas, img);
    document.body.appendChild(canvas);
}

Answer 3

显然有一个专门为此用例设计的名为AnalysisException: u'USING column `id` cannot be resolved on the left side of the join. The left-side columns: [WBS_ELEMENT_ID, WBS_ELEMENT_NAME, PROJECT_TYPE_ID, PROJECT_TYPE_NAME, CONTRACT_ID, CONTRACT_LINE_NUMBER, CONTRACT_LINE_NAME, WBS_FUNC, WBS_FUNC_DESCR, WBS_ELMT_STAT, WBS_ELMT_STAT_DESCR, ENG_CREATION_DATE, END_DATE, PROFIT_CENTER, COMPANY_CODE, CONTRACTING_FIRM_CLIENT_ID, PRODUCT_CODE];'的新事物。另外一个好处是它也可以在Web Workers中使用。

您可以在此处阅读规格：https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface

并在此处查看示例：https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

当前只有Chrome浏览器完全支持它，并且在Firefox和Opera中可以在标志后面使用，但是您随时可以在以下位置查看受支持的浏览器的最新信息：https://caniuse.com/#feat=offscreencanvas

ps .： Google也有专门的指南来说明其在Web Worker中的用法：https://developers.google.com/web/updates/2018/08/offscreen-canvas

是否可以创建没有DOM元素的HTML画布？

3 个答案: