Dart\u3067\u3082HTML5\u306ecanvas\u304c\u4f7f\u3048\u307e\u3059\u3002
\n
\nWeb\u30a2\u30d7\u30ea\u3092\u30a6\u30a3\u30b6\u30fc\u30c9\u3067\u4f5c\u6210\u3057\u3066\u304b\u3089\u3001HTML\u3092\u7de8\u96c6\u3057\u3066\u3001canvas\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
\r\n <div>\r\n <canvas id="canvas" width="300" height="300"><\/canvas>\r\n <\/div>\r\n<\/pre>\n\u6b21\u306b\u793a\u3059\u3088\u3046\u306b\u3001CanvasElement\u3067HTML5\u306ecanvas\u8981\u7d20\u3092\u53d6\u5f97\u3057\u3066\u3001CanvasRenderingContext2D\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001clearRect\u3067\u9577\u65b9\u5f62\u9818\u57df\u3092\u30af\u30ea\u30a2\u3001fillRect\u3067\u9577\u65b9\u5f62\u9818\u57df\u3092\u5857\u308a\u3064\u3076\u3057\u3001fillStyle\u3067\u8272\u6307\u5b9a\u3001\u3068\u3044\u3046\u51e6\u7406\u3092\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\r\n#import('dart:html');\r\n\r\nclass webapp {\r\n CanvasElement canvas;\r\n CanvasRenderingContext2D ctx;\r\n static final String COLOR = "gray";\r\n\r\n webapp() {\r\n canvas = document.query("#canvas");\r\n ctx = canvas.getContext("2d");\r\n }\r\n void drawFrame() {\r\n int w = canvas.width;\r\n int h = canvas.height;\r\n ctx.clearRect(0, 0, w, h);\r\n ctx.fillRect(10, 10, w-20, h-20);\r\n drawUnit(20, 20);\r\n } \r\n void drawUnit(num x, num y) {\r\n ctx.fillStyle = COLOR;\r\n ctx.fillRect(x, y, 15, 15);\r\n }\r\n void run() {\r\n drawFrame();\r\n }\r\n}\r\n\r\nvoid main() {\r\n new webapp().run();\r\n}\r\n<\/pre>\n\u898b\u3066\u306e\u901a\u308a\u3001dart:html\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u542b\u307e\u308c\u308bCanvas\u306e\u3088\u3046\u306a\u30af\u30e9\u30b9\u306fWeb\u30d6\u30e9\u30a6\u30b6\u306eIDL\u3068\u81ea\u52d5\u7684\u306b\u7d50\u3073\u3064\u304f\u3088\u3046\u306a\u306e\u3067\u3001HTML5\u306eDOM\u306b\u3064\u3044\u3066\u306e\u77e5\u8b58\u304c\u6d3b\u304b\u305b\u307e\u3059\u3002\u306a\u304a\u3001\u6b21\u306e\u3088\u3046\u306a\u7279\u9577\u304c\u3042\u308a\u307e\u3059\u3002\uff08\u53c2\u8003\uff1aSunflower Code Walkthrough | DartLang.org<\/a>\uff09<\/p>\n
\n
- arc(), fill()\u3068\u3044\u3063\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30e1\u30bd\u30c3\u30c9\u540d\u306f\u5909\u66f4\u3055\u308c\u3066\u3044\u306a\u3044<\/li>\n
- \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5c5e\u6027\u306b\u3064\u3044\u3066\u3001JavaScript\u3067\u305d\u3046\u3067\u3042\u308b\u3088\u3046\u306b\u3001\u901a\u5e38\u306f\u540c\u3058\u540d\u524d\u3068\u306a\u308b<\/li>\n
- \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\uff08onXxxx\u30e1\u30bd\u30c3\u30c9\uff09\u306f\u30a4\u30d9\u30f3\u30c8\u5f15\u6570\u3068\u3057\u3066\u30af\u30ed\u30fc\u30b8\u30e3\u3092\u6307\u5b9a\u3059\u308b\u3060\u3051\u3067\u7c21\u5358\u306b\u7528\u610f\u3067\u304d\u308b<\/li>\n<\/ul>\n
\uff0a\u300carc(), fill()\u3068\u3044\u3063\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30e1\u30bd\u30c3\u30c9\u540d\u306f\u5909\u66f4\u3067\u304d\u306a\u3044\u300d\u3092\u300carc(), fill()\u3068\u3044\u3063\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30e1\u30bd\u30c3\u30c9\u540d\u306f\u5909\u66f4\u3055\u308c\u3066\u3044\u306a\u3044\u300d\u3068\u4fee\u6b63\u3057\u307e\u3057\u305f\u3002<\/p>\n
\u7c21\u5358\u306a\u304c\u3089\u3001Dart\u3067\u306eCanvas\u5229\u7528\u65b9\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3057\u305f\u3002<\/p>\n
\n
- \u30af\u30e9\u30b9\u30d9\u30fc\u30b9\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u6307\u5411\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u306e\u57fa\u790e\u3092\u5b66\u3076\u306b\u306f … \u6539\u8a02\u7248 \u57fa\u790eJava(CD-ROM\u4ed8) (IMPRESS KISO SERIES)<\/a><\/li>\n
- \u30af\u30e9\u30b9\u30d9\u30fc\u30b9\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u6307\u5411\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u3092\u5b66\u3076\u306b\u306f … \u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9eJava (The Java Series)<\/a><\/li>\n
- \u95a2\u6570\u578b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u3092\u5b66\u3076\u306b\u306f … Scala\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u7b2c2\u7248<\/a><\/li>\n
- \u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u306e\u7406\u8ad6\u3092\u5b66\u306b\u306f … \u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u306e\u57fa\u790e\u6982\u5ff5 (\u30e9\u30a4\u30d6\u30e9\u30ea\u60c5\u5831\u5b66\u30b3\u30a2\u30fb\u30c6\u30ad\u30b9\u30c8) <\/a><\/li>\n<\/ul>\n