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