HTML为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>worker基本使用</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<button onclick="click()"></button>
</body>
<script>
var offscreen = null;
var worker = new Worker('offscreencanvas.js')
function click () {
if(offscreen == null){
var htmlCanvas = document.getElementById('myCanvas')
offscreen = htmlCanvas.ControlToOffscreen()
}
worker.postMessage({canvas:offscreen},[offscreen])
}
</script>
</html>
Js代码为
var x = 50;
var y = 50;
var offCanvas = null;
onmessage = function(evt){
if(offCanvas === null){
offCanvas = evt.data.canvas
} else{
if(offCanvas == evt.data.canvas){
console.log('offCanvas == evt.data.canvas')
} else {
console.log('offCanvas != evt.data.canvas')
}
}
gl = offCanvas.getContext('webgl');
gl.viewport(0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.enable(gl.SCLSSOR_TEST);
gl.scissor(y, x, 60, 60);
gl.clearColor(1.0, 0.0, 0.0, 1.0)//red
gl.clear(gl.COLOR_BUFFER_BIT)
gl.commit()
x +=10
y += 10
}