如何正确渲染离屏画布

Question

如何正确渲染离屏画布

9

我正在尝试创建一个基本的离屏渲染画布示例，但是在js中出现了“无法读取上下文属性”的错误。实际上，我的想法是创建一个像我在https://yalantis.com/看到的演示一样的演示。我想创建我的名字首字母。如果有更好的方法来实现这一点，请 enlighten 我。谢谢，在实际实现之前，这是我的基本尝试 :)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Off Screen Canvas</title>
<script>
    function createOffscreenCanvas() {
        var offScreenCanvas= document.createElement('canvas');
        offScreenCanvas.width= '1360px';
        offScreenCanvas.height= '400px';
        var context= offScreenCanvas.getContext("2d");
        context.fillRect(10,10,200,200);
    }
    function copyToOnScreen(offScreenCanvas) {
        var onScreenContext=document.getElementById('onScreen').getContext('2d');
        var offScreenContext=offScreenCanvas.getContext('2d');
        var image=offScreenCanvas.getImageData(10,10,200,200);
        onScreenContext.putImageData(image,0,0);
    }
    function main() {
        copyToOnScreen(createOffscreenCanvas());
    }
</script>
<style>
    #onScreen {
        width:1360px;
        height: 400px;
    }
</style>
</head>  
 <body onload="main()">
 <canvas id="onScreen"></canvas>
 </body>
</html>

- user7435594

3个回答

1

你可以尝试使用实验性的OffScreenCanvas API来实现这一点。我在这里留下了链接here。

因此，使用这个实验性API时，你实际上不需要将画布元素附加到DOM中。此外，如果你正在绘制数千个对象，则可以在Web Workers中执行绘制，这样它就不会阻塞浏览器的主线程。

const offscreen = new OffscreenCanvas(256, 256);
offscreen.getContext("2d") // or webgl, etc.

请注意，这是实验性的。您可以尝试检查像 "OffscreenCanvas" in window 这样的内容，并使用它，如果不可用，则可以回退到 document.createElement("canvas")。

- fatih-erikli

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

我们知道 OffScreenCanvas 在 Firefox 中何时会完全（或多或少）投入使用吗？ - Candleout

@Candleout 我不确定，但据我所知，它已经被实现了，但由于一个 bug，在 Firefox 首选项中被禁用了特性标志。因此，这个 bug 在最近几天（和几周）有一些活动，可能很快就会被修复。https://bugzilla.mozilla.org/show_bug.cgi?id=1390089 - fatih-erikli

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。-【来自审查】 - Ghost Ops

我添加了一个例子，谢谢提醒 :) - fatih-erikli

0

在你的函数 createOffscreenCanvas 中返回 offScreenCanvas。

function createOffscreenCanvas() {
    var offScreenCanvas= document.createElement('canvas');
    offScreenCanvas.width= '1360px';
    offScreenCanvas.height= '400px';
    var context= offScreenCanvas.getContext("2d");
    context.fillRect(10,10,200,200);
    return offScreenCanvas;
}

编辑

你从画布中获取了图像数据而不是上下文。

function copyToOnScreen(offScreenCanvas) {
    var onScreenContext=document.getElementById('onScreen').getContext('2d');
    var offScreenContext = offScreenCanvas.getContext('2d');
    var image=offScreenContext.getImageData(10,10,200,200);
    onScreenContext.putImageData(image,0,0);
}

- Oen44

嘿，已经解决了第一个错误，但现在在getImageData中出现了一个错误。 - user7435594

谢谢你告诉我如何改变它的颜色，我应该把fillStyle放在哪里？ - user7435594

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ɢʀᴜɴᴛ · Accepted Answer

您可以通过以下方式实现此目标...

function createOffscreenCanvas() {
    var offScreenCanvas = document.createElement('canvas');
    offScreenCanvas.width = '1360';
    offScreenCanvas.height = '400';
    var context = offScreenCanvas.getContext("2d");
    context.fillStyle = 'orange'; //set fill color
    context.fillRect(10, 10, 200, 200);
    return offScreenCanvas; //return canvas element
}

function copyToOnScreen(offScreenCanvas) {
    var onScreenContext = document.getElementById('onScreen').getContext('2d');
    onScreenContext.drawImage(offScreenCanvas, 0, 0);
}

function main() {
    copyToOnScreen(createOffscreenCanvas());
}

canvas {
  border: 1px solid black;
}

<body onload="main()">
<canvas id="onScreen" width="1360" height="400"></canvas>

注：不要使用 CSS 设置画布的宽度和高度。而是使用画布的本机宽度和高度属性。