1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>CanvasKit Demo</title> 8 9 <script type="text/javascript" src="https://particles.skia.org/dist/canvaskit.js"></script> 10 11 <script type="text/javascript" charset="utf-8"> 12 const bootTime = performance.now(); 13 const cdn = 'https://storage.googleapis.com/skia-cdn/misc/'; 14 // loadKit resolves with CanvasKit. 15 const loadKit = CanvasKitInit({ 16 locateFile: (file) => 'https://particles.skia.org/dist/'+file, 17 }); 18 19 loadKit.then(() => { 20 const n = performance.now(); 21 console.log(`loaded Kit in ${(n - bootTime).toFixed(2)} ms`) 22 }); 23 24 const loadLegoJSON = fetch(cdn + 'lego_loader.json').then((resp) => { 25 return resp.text(); 26 }); 27 const loadPartyJSON = fetch(cdn + 'confetti.json').then((resp) => { 28 return resp.text(); 29 }); 30 const loadDrinksJSON = fetch(cdn + 'drinks.json').then((resp) => { 31 return resp.text(); 32 }); 33 const loadOnboardingJSON = fetch(cdn + 'onboarding.json').then((resp) => { 34 return resp.text(); 35 }); 36 37 38 39 function SkottieDemo(values, canvasID, width=400, height=400) { 40 const [CanvasKit, legoJSON] = values; 41 const animation = CanvasKit.MakeManagedAnimation(legoJSON); 42 const duration = animation.duration() * 1000; 43 const size = animation.size(); 44 45 const bounds = {fLeft: 0, fTop: 0, fRight: width, fBottom: height}; 46 47 const surface = CanvasKit.MakeCanvasSurface(canvasID); 48 if (!surface) { 49 console.error('Could not make surface'); 50 return; 51 } 52 53 const firstFrame = Date.now(); 54 const clearColor = CanvasKit.WHITE; 55 56 function drawFrame(canvas) { 57 const seek = ((Date.now() - firstFrame) / duration) % 1.0; 58 const damage = animation.seek(seek); 59 60 if (damage.fRight > damage.fLeft && damage.fBottom > damage.fTop) { 61 canvas.clear(clearColor); 62 animation.render(canvas, bounds); 63 } 64 surface.requestAnimationFrame(drawFrame); 65 } 66 surface.requestAnimationFrame(drawFrame); 67 } 68 69 const legosAnimating = Promise.all([loadKit, loadLegoJSON]).then((values) => { 70 SkottieDemo(values, 'legos', 800, 800); 71 }); 72 const partyAnimating = Promise.all([loadKit, loadPartyJSON]).then((values) => { 73 SkottieDemo(values, 'party', 800, 800); 74 }); 75 const drinksAnimating = Promise.all([loadKit, loadDrinksJSON]).then((values) => { 76 SkottieDemo(values, 'drinks', 800, 800); 77 }); 78 const onboardingAnimating = Promise.all([loadKit, loadOnboardingJSON]).then((values) => { 79 SkottieDemo(values, 'onboarding', 800, 800); 80 }); 81 82 Promise.all([legosAnimating, partyAnimating, drinksAnimating, onboardingAnimating]).then(() => { 83 const frames = new Float64Array(100); 84 let idx = 0; 85 let now = performance.now(); 86 function benchFrame() { 87 frames[idx] = performance.now() - now; 88 idx++; 89 if (idx < frames.length) { 90 now = performance.now(); 91 window.requestAnimationFrame(benchFrame); 92 } else { 93 let out = ''; 94 for (const frameTime of frames) { 95 out += frameTime.toFixed(2); 96 out += '\n'; 97 } 98 console.log(out); 99 } 100 } 101 window.requestAnimationFrame(benchFrame); 102 }) 103 </script> 104 105 <style> 106 canvas { 107 border: 1px dashed #AAA; 108 width: 400px; 109 height: 400px; 110 } 111 </style> 112 113</head> 114<body> 115 <h1> CanvasKit</h1> 116 117 <canvas id=legos width=800 height=800></canvas> 118 <canvas id=party width=800 height=800></canvas> 119 <canvas id=drinks width=800 height=800></canvas> 120 <canvas id=onboarding width=800 height=800></canvas> 121 122</body> 123</html>