130 lines
3.9 KiB
HTML
130 lines
3.9 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>
|
|
|
|
<br>
|
|
|
|
<img id="src" src="https://storage.googleapis.com/skia-cdn/misc/test.png"
|
|
width=40 height=40 crossorigin="anonymous">
|
|
|
|
<canvas id=api4 width=300 height=300></canvas>
|
|
<canvas id=api5 width=300 height=300></canvas>
|
|
<canvas id=api6 width=300 height=300></canvas>
|
|
|
|
<script type="text/javascript" src="/build/canvaskit.js"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
const cdn = 'https://storage.googleapis.com/skia-cdn/misc/';
|
|
|
|
const ckLoaded = CanvasKitInit({locateFile: (file) => '/build/'+file});
|
|
const loadTestImage = fetch(cdn + 'test.png').then((response) => response.arrayBuffer());
|
|
const imageEle = document.getElementById("src");
|
|
|
|
Promise.all([ckLoaded, loadTestImage, imageEle.decode()]).then((results) => {
|
|
ContextSharingExample(results[0]);
|
|
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();
|
|
img.delete();
|
|
}
|
|
|
|
window.requestAnimationFrame(firstFrame);
|
|
}
|
|
|
|
function ContextSharingExample(CanvasKit) {
|
|
const img = CanvasKit.MakeLazyImageFromTextureSource(imageEle);
|
|
|
|
const surfOne = CanvasKit.MakeWebGLCanvasSurface("api4");
|
|
const surfTwo = CanvasKit.MakeWebGLCanvasSurface("api5");
|
|
const surfThree = CanvasKit.MakeWebGLCanvasSurface("api6");
|
|
|
|
let i = 0;
|
|
function drawFrame(canvas) {
|
|
canvas.drawImageCubic(img, 5+i, 5+i, 0.3, 0.3, null);
|
|
i += 1
|
|
if (i >= 3) {
|
|
if (i > 60) {
|
|
img.delete();
|
|
return;
|
|
}
|
|
if (i % 2) {
|
|
surfOne.requestAnimationFrame(drawFrame);
|
|
} else {
|
|
surfTwo.requestAnimationFrame(drawFrame);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
surfOne.requestAnimationFrame(drawFrame);
|
|
surfTwo.requestAnimationFrame(drawFrame);
|
|
surfThree.requestAnimationFrame(drawFrame);
|
|
}
|
|
|
|
|
|
</script> |