84 lines
2.4 KiB
HTML
84 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>Texture demos</title>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script type="text/javascript" src="https://particles.skia.org/dist/canvaskit.js"></script>
|
|
|
|
<style>
|
|
canvas {
|
|
border: 1px dashed grey;
|
|
}
|
|
#sourceImage, #sourceVideo {
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 1px solid red;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<h1>User Defined Textures</h1>
|
|
|
|
<p>Tap on one of the texture sources to switch to it.</p>
|
|
|
|
<canvas id=draw width=500 height=500></canvas>
|
|
|
|
<img id="sourceImage" src="/demos/textures/testimg.png">
|
|
<video id="sourceVideo" autoplay muted></video>
|
|
</body>
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
const ckLoaded = CanvasKitInit({ locateFile: (file) => 'https://particles.skia.org/dist/' + file });
|
|
const canvasEle = document.getElementById('draw');
|
|
const imgEle = document.getElementById('sourceImage');
|
|
const videoEle = document.getElementById('sourceVideo');
|
|
|
|
// Links the web cam to the video element.
|
|
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
|
|
videoEle.srcObject = stream;
|
|
}).catch((err) => {
|
|
console.error("Could not set up video", err);
|
|
});
|
|
|
|
// Enables switching between texture sources.
|
|
let srcEle = imgEle;
|
|
imgEle.addEventListener('click', () => {
|
|
srcEle = imgEle;
|
|
});
|
|
videoEle.addEventListener('click', () => {
|
|
srcEle = videoEle;
|
|
});
|
|
|
|
Promise.all([
|
|
ckLoaded,
|
|
imgEle.decode(),
|
|
]).then(([
|
|
CanvasKit,
|
|
shouldBeNull,
|
|
]) => {
|
|
const surface = CanvasKit.MakeCanvasSurface('draw');
|
|
if (!surface) {
|
|
throw 'Could not make surface';
|
|
}
|
|
const paint = new CanvasKit.Paint();
|
|
// This image will have its underlying texture re-used once per frame.
|
|
const img = surface.makeImageFromTextureSource(srcEle);
|
|
|
|
let lastTS = Date.now();
|
|
function drawFrame(canvas) {
|
|
const now = Date.now();
|
|
canvas.rotate(10 * (now - lastTS) / 1000, 250, 250);
|
|
lastTS = now;
|
|
// Re-use the image's underlying texture, but replace the contents of the old texture
|
|
// with the contents of srcEle
|
|
surface.updateTextureFromSource(img, srcEle);
|
|
canvas.clear(CanvasKit.Color(200, 200, 200));
|
|
canvas.drawImage(img, 5, 5, paint);
|
|
surface.requestAnimationFrame(drawFrame);
|
|
}
|
|
surface.requestAnimationFrame(drawFrame);
|
|
});
|
|
|
|
</script>
|