85 lines
2.7 KiB
HTML
85 lines
2.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<title>CanvasKit (Skia via Web Assembly)</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">
|
||
|
|
|
||
|
|
<style>
|
||
|
|
canvas, img {
|
||
|
|
border: 1px dashed #AAA;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<canvas id=api1 width=300 height=300></canvas>
|
||
|
|
<canvas id=api2 width=300 height=300></canvas>
|
||
|
|
<canvas id=api3 width=300 height=300></canvas>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="/node_modules/canvaskit/bin/canvaskit.js"></script>
|
||
|
|
<script type="text/javascript" charset="utf-8">
|
||
|
|
const cdn = 'https://storage.googleapis.com/skia-cdn/misc/';
|
||
|
|
|
||
|
|
const ckLoaded = CanvasKitInit({locateFile: (file) => '/node_modules/canvaskit/bin/'+file});
|
||
|
|
const loadTestImage = fetch(cdn + 'test.png').then((response) => response.arrayBuffer());
|
||
|
|
|
||
|
|
Promise.all([ckLoaded, loadTestImage]).then((results) => {MultiCanvasExample(...results)});
|
||
|
|
|
||
|
|
// This example shows how CanvasKit can automatically switch between multiple canvases
|
||
|
|
// with different WebGL contexts.
|
||
|
|
function MultiCanvasExample(CanvasKit, imgBytes) {
|
||
|
|
const paint = new CanvasKit.Paint();
|
||
|
|
|
||
|
|
const surfOne = CanvasKit.MakeWebGLCanvasSurface("api1");
|
||
|
|
const canvasOne = surfOne.getCanvas();
|
||
|
|
const surfTwo = CanvasKit.MakeWebGLCanvasSurface("api2");
|
||
|
|
const canvasTwo = surfTwo.getCanvas();
|
||
|
|
const surfThree = CanvasKit.MakeWebGLCanvasSurface("api3");
|
||
|
|
const canvasThree = surfThree.getCanvas();
|
||
|
|
|
||
|
|
function firstFrame() {
|
||
|
|
paint.setColor(CanvasKit.Color4f(1, 0, 0, 1)); // red
|
||
|
|
canvasOne.drawRect(CanvasKit.LTRBRect(0, 0, 300, 300), paint);
|
||
|
|
surfOne.flush();
|
||
|
|
|
||
|
|
paint.setColor(CanvasKit.Color4f(0, 1, 0, 1)); // green
|
||
|
|
canvasTwo.drawRect(CanvasKit.LTRBRect(0, 0, 300, 300), paint);
|
||
|
|
surfTwo.flush();
|
||
|
|
|
||
|
|
paint.setColor(CanvasKit.Color4f(0, 0, 1, 1)); // blue
|
||
|
|
canvasThree.drawRect(CanvasKit.LTRBRect(0, 0, 300, 300), paint);
|
||
|
|
surfThree.flush();
|
||
|
|
|
||
|
|
window.requestAnimationFrame(secondFrame);
|
||
|
|
}
|
||
|
|
|
||
|
|
let img;
|
||
|
|
function secondFrame() {
|
||
|
|
img = CanvasKit.MakeImageFromEncoded(imgBytes);
|
||
|
|
|
||
|
|
canvasOne.drawImageCubic(img, 10, 10, 0.3, 0.3, null);
|
||
|
|
surfOne.flush();
|
||
|
|
|
||
|
|
canvasTwo.drawImageCubic(img, 10, 10, 0.3, 0.3, null);
|
||
|
|
surfTwo.flush();
|
||
|
|
|
||
|
|
canvasThree.drawImageCubic(img, 10, 10, 0.3, 0.3, null);
|
||
|
|
surfThree.flush();
|
||
|
|
|
||
|
|
window.requestAnimationFrame(thirdFrame);
|
||
|
|
}
|
||
|
|
|
||
|
|
function thirdFrame() {
|
||
|
|
canvasOne.drawImageCubic(img, 100, 100, 0.3, 0.3, null);
|
||
|
|
surfOne.flush();
|
||
|
|
|
||
|
|
canvasTwo.drawImageCubic(img, 100, 100, 0.3, 0.3, null);
|
||
|
|
surfTwo.flush();
|
||
|
|
|
||
|
|
canvasThree.drawImageCubic(img, 100, 100, 0.3, 0.3, null);
|
||
|
|
surfThree.flush();
|
||
|
|
}
|
||
|
|
|
||
|
|
window.requestAnimationFrame(firstFrame);
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|