2019-02-11 21:46:34 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
2020-03-15 10:07:37 +08:00
|
|
|
<title>Konva Offscreen Canvas Demo</title>
|
2019-02-11 21:46:34 +08:00
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
background-color: #f0f0f0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2020-03-15 10:07:37 +08:00
|
|
|
<canvas id="canvas"></canvas>
|
2019-02-11 21:46:34 +08:00
|
|
|
<script>
|
2020-03-15 10:07:37 +08:00
|
|
|
var htmlCanvas = document.getElementById('canvas');
|
|
|
|
|
htmlCanvas.width = window.innerWidth;
|
|
|
|
|
htmlCanvas.height = window.innerHeight;
|
2019-07-11 05:59:39 +08:00
|
|
|
var offscreen = htmlCanvas.transferControlToOffscreen();
|
2019-02-11 21:46:34 +08:00
|
|
|
|
2019-07-11 05:59:39 +08:00
|
|
|
var w = new Worker('./worker.js');
|
2020-03-15 10:07:37 +08:00
|
|
|
w.postMessage({ canvas: offscreen }, [offscreen]);
|
|
|
|
|
|
|
|
|
|
var EVENTS = [
|
|
|
|
|
'mouseenter',
|
|
|
|
|
'mousedown',
|
|
|
|
|
'mousemove',
|
|
|
|
|
'mouseup',
|
|
|
|
|
'mouseout',
|
|
|
|
|
'touchstart',
|
|
|
|
|
'touchmove',
|
|
|
|
|
'touchend',
|
|
|
|
|
'mouseover',
|
|
|
|
|
'wheel',
|
|
|
|
|
'contextmenu',
|
|
|
|
|
'pointerdown',
|
|
|
|
|
'pointermove',
|
|
|
|
|
'pointerup',
|
|
|
|
|
'pointercancel',
|
|
|
|
|
'lostpointercapture'
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
EVENTS.forEach(eventName => {
|
|
|
|
|
htmlCanvas.addEventListener(eventName, e => {
|
|
|
|
|
w.postMessage({
|
|
|
|
|
eventName,
|
|
|
|
|
event: {
|
|
|
|
|
clientX: e.clientX,
|
|
|
|
|
clientY: e.clientY
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
2019-02-11 21:46:34 +08:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
