mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
59 lines
1.3 KiB
HTML
59 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Konva Offscreen Canvas Demo</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f0f0f0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<canvas id="canvas"></canvas>
|
|
<script>
|
|
var htmlCanvas = document.getElementById('canvas');
|
|
htmlCanvas.width = window.innerWidth;
|
|
htmlCanvas.height = window.innerHeight;
|
|
var offscreen = htmlCanvas.transferControlToOffscreen();
|
|
|
|
var w = new Worker('./worker.js');
|
|
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
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|