1cb93a386Sopenharmony_ci<!DOCTYPE html> 2cb93a386Sopenharmony_ci<title>Texture demos</title> 3cb93a386Sopenharmony_ci<meta charset="utf-8" /> 4cb93a386Sopenharmony_ci<meta http-equiv="X-UA-Compatible" content="IE=edge"> 5cb93a386Sopenharmony_ci<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6cb93a386Sopenharmony_ci<script type="text/javascript" src="https://particles.skia.org/dist/canvaskit.js"></script> 7cb93a386Sopenharmony_ci 8cb93a386Sopenharmony_ci<style> 9cb93a386Sopenharmony_ci canvas { 10cb93a386Sopenharmony_ci border: 1px dashed grey; 11cb93a386Sopenharmony_ci } 12cb93a386Sopenharmony_ci #sourceImage, #sourceVideo { 13cb93a386Sopenharmony_ci width: 100px; 14cb93a386Sopenharmony_ci height: 100px; 15cb93a386Sopenharmony_ci border: 1px solid red; 16cb93a386Sopenharmony_ci cursor: pointer; 17cb93a386Sopenharmony_ci } 18cb93a386Sopenharmony_ci</style> 19cb93a386Sopenharmony_ci 20cb93a386Sopenharmony_ci<body> 21cb93a386Sopenharmony_ci <h1>User Defined Textures</h1> 22cb93a386Sopenharmony_ci 23cb93a386Sopenharmony_ci <p>Tap on one of the texture sources to switch to it.</p> 24cb93a386Sopenharmony_ci 25cb93a386Sopenharmony_ci <canvas id=draw width=500 height=500></canvas> 26cb93a386Sopenharmony_ci 27cb93a386Sopenharmony_ci <img id="sourceImage" src="/demo/textures/testimg.png"> 28cb93a386Sopenharmony_ci <video id="sourceVideo" autoplay muted></video> 29cb93a386Sopenharmony_ci</body> 30cb93a386Sopenharmony_ci 31cb93a386Sopenharmony_ci<script type="text/javascript" charset="utf-8"> 32cb93a386Sopenharmony_ci const ckLoaded = CanvasKitInit({ locateFile: (file) => 'https://particles.skia.org/dist/' + file }); 33cb93a386Sopenharmony_ci const canvasEle = document.getElementById('draw'); 34cb93a386Sopenharmony_ci const imgEle = document.getElementById('sourceImage'); 35cb93a386Sopenharmony_ci const videoEle = document.getElementById('sourceVideo'); 36cb93a386Sopenharmony_ci 37cb93a386Sopenharmony_ci // Links the web cam to the video element. 38cb93a386Sopenharmony_ci navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => { 39cb93a386Sopenharmony_ci videoEle.srcObject = stream; 40cb93a386Sopenharmony_ci }).catch((err) => { 41cb93a386Sopenharmony_ci console.error("Could not set up video", err); 42cb93a386Sopenharmony_ci }); 43cb93a386Sopenharmony_ci 44cb93a386Sopenharmony_ci // Enables switching between texture sources. 45cb93a386Sopenharmony_ci let srcEle = imgEle; 46cb93a386Sopenharmony_ci imgEle.addEventListener('click', () => { 47cb93a386Sopenharmony_ci srcEle = imgEle; 48cb93a386Sopenharmony_ci }); 49cb93a386Sopenharmony_ci videoEle.addEventListener('click', () => { 50cb93a386Sopenharmony_ci srcEle = videoEle; 51cb93a386Sopenharmony_ci }); 52cb93a386Sopenharmony_ci 53cb93a386Sopenharmony_ci Promise.all([ 54cb93a386Sopenharmony_ci ckLoaded, 55cb93a386Sopenharmony_ci imgEle.decode(), 56cb93a386Sopenharmony_ci]).then(([ 57cb93a386Sopenharmony_ci CanvasKit, 58cb93a386Sopenharmony_ci shouldBeNull, 59cb93a386Sopenharmony_ci]) => { 60cb93a386Sopenharmony_ci const surface = CanvasKit.MakeCanvasSurface('draw'); 61cb93a386Sopenharmony_ci if (!surface) { 62cb93a386Sopenharmony_ci throw 'Could not make surface'; 63cb93a386Sopenharmony_ci } 64cb93a386Sopenharmony_ci const paint = new CanvasKit.Paint(); 65cb93a386Sopenharmony_ci 66cb93a386Sopenharmony_ci // This example creates a new texture, loads it into an image, and then deletes the image 67cb93a386Sopenharmony_ci // (which should delete the texture automatically). 68cb93a386Sopenharmony_ci let lastTS = Date.now(); 69cb93a386Sopenharmony_ci function drawFrame(canvas) { 70cb93a386Sopenharmony_ci const now = Date.now(); 71cb93a386Sopenharmony_ci canvas.rotate(10 * (now - lastTS) / 1000, 250, 250); 72cb93a386Sopenharmony_ci lastTS = now; 73cb93a386Sopenharmony_ci const img = surface.makeImageFromTextureSource(srcEle); 74cb93a386Sopenharmony_ci canvas.clear(CanvasKit.Color(200, 200, 200)); 75cb93a386Sopenharmony_ci canvas.drawImage(img, 5, 5, paint); 76cb93a386Sopenharmony_ci img && img.delete(); 77cb93a386Sopenharmony_ci surface.requestAnimationFrame(drawFrame); 78cb93a386Sopenharmony_ci } 79cb93a386Sopenharmony_ci surface.requestAnimationFrame(drawFrame); 80cb93a386Sopenharmony_ci }); 81cb93a386Sopenharmony_ci 82cb93a386Sopenharmony_ci</script>
