Last active
March 13, 2019 11:28
-
-
Save mitsuoka/edc5204b8d65c962f7afc8379a078b39 to your computer and use it in GitHub Desktop.
canvas_test : Sample code for DartPad embedding
This file contains 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
| <html> | |
| <head> | |
| <title>CanvasTest</title> | |
| </head> | |
| <body> | |
| <h1>CanvasTest</h1> | |
| <h2 id="status">dart is not running</h2> | |
| <script defer src="Canvas_Test.dart.js"></script> | |
| <canvas id="canvas" width="200" height="200"></canvas> | |
| </body> | |
| </html> |
This file contains 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
| import 'dart:html'; | |
| import 'dart:math'; | |
| class CanvasTest { | |
| CanvasTest() {} | |
| int width, height; | |
| CanvasRenderingContext2D ctx; | |
| static int radius = 30; | |
| void run() { | |
| write("Canvas test"); | |
| CanvasElement ce = document.querySelector("#canvas"); | |
| ctx = ce.getContext("2d"); | |
| width = ce.width; | |
| height = ce.height; | |
| ctx.strokeRect(0, 0, width, height); | |
| ce.onMouseDown.listen(onMouseDown); | |
| } | |
| void write(String message) { | |
| document.querySelector('#status').innerHtml = message; | |
| } | |
| void onMouseDown(event) { | |
| int x = event.offset.x; | |
| int y = event.offset.y; | |
| ctx.moveTo(x + radius, y); | |
| ctx.arc(x, y, radius, 0, pi * 2, false); | |
| ctx.fillStyle = 'blue'; | |
| ctx.fill(); | |
| } | |
| } | |
| void main() { | |
| new CanvasTest().run(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment