关于离屏渲染Canvas的实测demo
测试浏览器支持可用
if (HTMLCanvasElement.prototype.transferControlToOffscreen) {
console.log('support for transferring control of an offscreen canvas exists');
} else {
console.log('support for transferring control of an offscreen canvas does NOT exist');
}
实测FireFox不支持 HTMLCanvasElement.prototype.transferControlToOffscreen，注意。
<html>
<head >
<title>离屏渲染canvas</title>
</head>
<body >
<canvas id="canvas" width="150" height="150"></canvas>
</body>
<script type="application/javascript">
const data = `
var initCanvas;
self.onmessage = e => {
console.log( e.data);
initCanvas=e.data.canvas;
draw(initCanvas);
};
function draw(canvas) {
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
`;
// 转成二进制对象
const blob = new Blob([data]);
// 生成url
const url = window.URL.createObjectURL(blob);
//生成离屏canvas
const canvas=document.getElementById('canvas');
const offscreen = canvas.transferControlToOffscreen();
// 加载url
const worker = new Worker(url);
worker.postMessage({ canvas: offscreen }, [offscreen]);
</script>
</html>
