OffscreenCanvas выполняет рисование и обновление для Chrome для Windows, Chrome для Android, но не для Android Webview.Он не обновляет и не отображает OffscreenCanvas на Cordova для Android с помощью веб-браузера Android.
OffscreenCanvas, используемый в WebWorker, выполняет рисование и обновление до OffscreenCanvas в Chrome для настольных ПК и Chrome для Android, но не для приложения Cordova.Он не обновляет и не отображает OffscreenCanvas на Cordova для Android с помощью веб-браузера Android.
OffscreenCanvas - это интерфейс, который позволяет рисовать доступ к HTMLCanvasElement без привязки к DOM (или документу).объект).Он сильно отличается от холста, созданного с помощью document.createElement ("canvas"), поскольку OffscreenCanvas не требует создания объекта документа. Это позволяет использовать его как Canvas, не требуя синхронизации с DOM, и использовать его какспособ использования Canvas в Web Workers.
Многие стандартные графические библиотеки Javascript, такие как three.js, используют OffscreenCanvas. Это важно для игр.
https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
Естьпротестировано приложение Android Cordova на аккумуляторе телефонов с поддержкой Android TCL LX LG K7 LG Aristo LG Tribute Dynasty All с использованием Chrome Mobile v 73.
Однопоточный Прикрепленный код для рисования на холсте с помощью OffscreenCanvas и Canvas2DAPI. https://pastebin.com/PUC48kgk
<html>
<body>
This draws to an OffscreenCanvas. If it works, you should see a red rect inside of a blue rect.
<canvas id = "OffScreen" width=160 height=120 style="position:absolute; display:block; width:100% height:80%">
<script type="text/javascript">
var canvas = document.getElementById("OffScreen");
var offscreen = canvas.transferControlToOffscreen();
var ctx = offscreen.getContext('2d');
ctx.fillStyle = "#0000ff";
ctx.fillRect(40,40,80,40);
ctx.fillStyle = "#ff0000";
ctx.fillRect(45,45,70,30);
</script>
</body>
</html>
Многопоточность В приложении приведен код для рисования на холст с помощью OffscreenCanvas и Canvas2D API.https://pastebin.com/jfCsbBW3
<html>
<body>
This draws to an OffscreenCanvas using a Web Worker. If it works, you should see a red rect inside of a blue rect.
<canvas id = "OffScreen" width=160 height=120 style="position:absolute; display:block; width:100% height:80%">
<script type="text/javascript">
var canvas = document.getElementById("OffScreen");
var offscreen = canvas.transferControlToOffscreen();
const worker = new Worker(URL.createObjectURL(new Blob(["("+workerThread.toString()+")()"], {type: 'text/javascript'})));
worker.postMessage({ offscreenmessage: offscreen }, [offscreen]);
function workerThread()
{
var offscreen;
function render()
{
var ctx = offscreen.getContext('2d');
ctx.fillStyle = "#0000ff";
ctx.fillRect(40,40,80,40);
ctx.fillStyle = "#ff0000";
ctx.fillRect(45,45,70,30);
}
onmessage = function(e) {
console.log('Message received from main script ' + JSON.stringify(e.data));
if (e.data["offscreenmessage"] != undefined)
{
offscreen = e.data["offscreenmessage"];
console.log("Successfully passed control of a canvas to another thread");
render();
}
}
}
</script>
</body>
</html>
В прилагаемых примерах пользователь должен иметь возможность просматривать красный прямоугольник внутри синего прямоугольника.Первый пример использует OffscreenCanvas в основном потоке.Второй использует OffscreenCanvas в рабочем потоке.В Chrome Mobile v 73 оба примера работают правильно.В приложении Cordova для Android с тем же кодом, что и в примерах, ничего не отображается.