【问题标题】：how to render offscreen canvas properly如何正确渲染离屏画布
【发布时间】：2022-01-15 05:29:07
【问题描述】：

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

<!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>

【问题讨论】：

标签： html canvas html5-canvas

【解决方案1】：

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

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 设置画布的宽度和高度。而是使用画布的原生宽度和高度属性。

【讨论】：

嘿，谢谢！ :) 它工作正常。这是绘制提到的 yalantis 示例的正确方法吗？如何更改矩形颜色并在矩形内填充粒子？
有多种方法可以实现这一点。这是其中之一。不是最好的或更坏的，但会完成这项工作。你应该选择你觉得舒服的东西。 yalantis 中提到的例子更复杂。这只是开始
可以在createOffscreenCanvas函数中在绘制矩形之前设置fillStyle来改变它的颜色。检查编辑的答案
感谢您赐教，如果您知道任何学习此类动画的教程或参考资料，请指导我，我是新手 :)
你应该使用画布库（在google上搜索）更容易实现这样的动画。首先看看这个video

【解决方案2】：

在你的函数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);
}

【讨论】：

嘿摆脱了第一个错误，但现在 getImageData 出现错误
是的，谢谢你告诉我如何改变它的颜色我应该把fillStyle放在哪里？

【解决方案3】：

您可以尝试使用实验性 OffScreenCanvas API 来做到这一点。我要留下链接here。

因此，您实际上不需要使用该实验性 API 将 canvas 元素附加到 DOM，此外，您可以在 webworkers 中执行绘图，因此如果您要绘制数千个对象，它不会阻塞浏览器的主线程。

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

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
我们知道这个 OffScreenCanvas 什么时候可以在 Firefox 中完全（或多或少）运行？
@Candleout 我不知道，但据我了解，它已实现但由于错误而在 Firefox 首选项中使用功能标志禁用。所以这个错误在最后几天（和几周）有一些活动，可能很快就会修复。 bugzilla.mozilla.org/show_bug.cgi?id=1390089
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
我加了一个例子，谢谢提醒:)