Created
May 26, 2021 05:24
-
-
Save pissang/9db9bae8def095d1cfb0265dda83a672 to your computer and use it in GitHub Desktop.
CanvasKit Path Draw
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| </head> | |
| <body> | |
| <canvas id="foo" width="300" height="300"></canvas> | |
| <script | |
| type="text/javascript" | |
| src="https://unpkg.com/[email protected]/bin/canvaskit.js" | |
| ></script> | |
| <script type="text/javascript"> | |
| const ckLoaded = CanvasKitInit({ | |
| locateFile: (file) => | |
| "https://unpkg.com/[email protected]/bin/" + file | |
| }); | |
| ckLoaded.then((CanvasKit) => { | |
| const surface = CanvasKit.MakeCanvasSurface('foo'); | |
| const paint = new CanvasKit.Paint(); | |
| paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0)); | |
| paint.setStyle(CanvasKit.PaintStyle.Fill); | |
| paint.setAntiAlias(true); | |
| // const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 25, 15); | |
| const w = 100; // size of rect | |
| const h = 60; | |
| let x = 10; // initial position of top left corner. | |
| let y = 60; | |
| let dirX = 1; // box is always moving at a constant speed in one of the four diagonal directions | |
| let dirY = 1; | |
| function drawFrame(canvas) { | |
| // boundary check | |
| if (x < 0 || x+w > 300) { | |
| dirX *= -1; // reverse x direction when hitting side walls | |
| } | |
| if (y < 0 || y+h > 300) { | |
| dirY *= -1; // reverse y direction when hitting top and bottom walls | |
| } | |
| // move | |
| x += dirX; | |
| y += dirY; | |
| canvas.clear(CanvasKit.WHITE); | |
| const path = new CanvasKit.Path(); | |
| const R = 20; | |
| const TAU = 6.2831853; | |
| path.moveTo(R + x, 0.0 + y); | |
| for (let i = 1; i < 7; ++i) { | |
| const theta = 3 * i * TAU / 7; | |
| path.lineTo(R * Math.cos(theta) + x, R * Math.sin(theta) + y); | |
| } | |
| // const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(x, y, x+w, y+h), 25, 15); | |
| canvas.drawPath(path, paint); | |
| surface.requestAnimationFrame(drawFrame); | |
| } | |
| surface.requestAnimationFrame(drawFrame); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment