Question

OffscreenCanvas在Windows版Chrome，Android版Chrome而非Android Webview上执行绘图和更新。它不会使用Android Webview在Android的Cordova上更新或显示OffscreenCanvas。
在WebWorker中使用的OffscreenCanvas在桌面版Chrome和Android版Chrome上执行绘图并更新到OffscreenCanvas，但对于Cordova应用程序则不执行。它不会使用Android Webview在Android的Cordova上更新或显示OffscreenCanvas。

OffscreenCanvas是一个接口，该接口允许图形访问HTMLCanvasElement而不绑定到DOM（或文档对象）。它与使用document.createElement（“ canvas'）创建的画布非常不同，因为OffscreenCanvas不需要创建文档对象。这使您可以将其用作Canvas，而无需同步到DOM，并且可以将其用作一种在Web Workers中使用Canvas的方法。

许多行业标准的Javascript图形库（例如three.js）都使用OffscreenCanvas。这对游戏至关重要。

https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

已使用支持Android的手机电池测试了Cordova Android应用程序。 TCL LX LG K7 LG亚里士多德 LG朝贡王朝全部使用Chrome Mobile v 73。

单线程随附的代码是使用OffscreenCanvas和Canvas2D API绘制到画布上的代码。 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应用程序上，什么都没有显示。

OffscreenCanvas可在Chrome Mobile上使用，但拒绝在Mobile Application中使用

0 个答案: