HTML5 Canvasでランダムに図形を描く CasualJS版 TFujinami Follow 2011-05-25 22:05:59 License: MIT License Fork0 Fav0 View4663 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 75 lines HTML 5 lines CSS 13 lines http://jsdo.it/TFujinami/CanvasRandomDraw のCasualJS版です。 画面をクリックすると線→四角→丸でローテーションします。 ★他に比べてパフォーマンスが悪いです。使い方が間違っているのかも。 CasualJS http://dothtml5.com/archives/20110325_casualjs.html ノーマル版 http://jsdo.it/TFujinami/CanvasRandomDraw EaselJS版 http://jsdo.it/TFujinami/CanvasRandomDrawEaselJS Gury版 http://jsdo.it/TFujinami/CanvasRandomDrawGury Raphael (SVG) 版 http://jsdo.it/TFujinami/SVGRandomDrawRaphael CSS版 http://jsdo.it/TFujinami/CSSRandomDraw oCanvas版 http://jsdo.it/TFujinami/CanvasRandomDrawoCanvas jCanvaScript版 http://jsdo.it/TFujinami/CanvasRandomDrawjCanvaScript CasualJS版 http://jsdo.it/TFujinami/CanvasRandomDrawCasualJS jCanvas版 http://jsdo.it/TFujinami/CanvasRandomDrawjCanvas Processing版 http://jsdo.it/TFujinami/CanvasRandomDrawProcessing LibCanvas版 http://jsdo.it/TFujinami/CanvasRandomDrawLibCanvas CAKE版 http://jsdo.it/TFujinami/CanvasRandomDrawCake HTML5 Canvasでランダムに図形を描く CasualJS版 jQuery v1.5.2 var object_number = 50; var object_size = 150; var margin = 15; var fps = 0; var mode = 0; var window_x = Number($(window).width()) - (margin * 2); var window_y = Number($(window).height()) - (margin * 2) - 50; var stage; var shape; var graphic; window.onload = Init; function Init(){ $('#canvasarea').click(function(){ mode < 2 ? mode++ : mode = 0 }); $('#canvasarea').attr({'width':window_x, 'height':window_y}); $('#canvasarea').css({'margin-left':margin, 'margin-top':margin}); $('#fps').css({'margin-left':margin}); var canvas = document.getElementById("canvasarea"); var context = canvas.getContext("2d"); stage = new Stage(context); for (var i=0; i<object_number; i++){ stage.addChild(new Shape()); } main(); viewFPSandMode(); } function main(){ var shape = new Shape(); var graphic = shape.graphics; var color = 'rgb(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ')'; if (mode == 0){ var sx = Math.floor(Math.random() * window_x); var sy = Math.floor(Math.random() * window_y); var ex = Math.floor(Math.random() * window_x); var ey = Math.floor(Math.random() * window_y); graphic.lineStyle(1, color).moveTo(sx, sy).lineTo(ex, ey).stroke(); } else { var x = Math.floor(Math.random() * (window_x - object_size)); var y = Math.floor(Math.random() * (window_y - object_size)); var w = Math.floor(Math.random() * object_size) + 1; var h = Math.floor(Math.random() * object_size) + 1; if (mode == 1){ graphic.beginFill(color, 1).drawRect(x, y, w, h); } else { graphic.beginFill(color, 1).drawEllipse(x, y, w, h); } } stage.removeChildAt(0); stage.addChild(shape); // $('#fps').text(object.length + 'objects'); for (var i=0; i<object_number; i++){ stage.getChildAt(i).alpha = 1 - (object_number - i) / object_number;; } fps++; setTimeout('main()', 0); } function viewFPSandMode(){ var view_mode = '' if (mode == 0){ view_mode = 'line'; } if (mode == 1){ view_mode = 'square'; } if (mode == 2){ view_mode = 'circle'; } $('#fps').text(fps + 'fps / mode:' + view_mode + ' (上記エリアをクリックで線→四角→丸)'); fps = 0; setTimeout('viewFPSandMode()', 1000); } <script src="http://casualjs.googlecode.com/svn/trunk/js/casual-0.1.min.js"></script> <canvas id="canvasarea"></canvas> <p id="fps"></p> HTML5 Canvasでランダムに図形を描く CasualJS版 body { background-color: black; margin: 0; } canvas { background-color: white; } p { color: white; font-size: 10pt; } http://jsdo.it/TFujinami/CanvasRandomDraw のCasualJS版です。 画面をクリックすると線→四角→丸でローテーションします。 ★他に比べてパフォーマンスが悪いです。使い方が間違っているのかも。 CasualJS http://dothtml5.com/archives/20110325_casualjs.html ノーマル版 http://jsdo.it/TFujinami/CanvasRandomDraw EaselJS版 http://jsdo.it/TFujinami/CanvasRandomDrawEaselJS Gury版 http://jsdo.it/TFujinami/CanvasRandomDrawGury Raphael (SVG) 版 http://jsdo.it/TFujinami/SVGRandomDrawRaphael CSS版 http://jsdo.it/TFujinami/CSSRandomDraw oCanvas版 http://jsdo.it/TFujinami/CanvasRandomDrawoCanvas jCanvaScript版 http://jsdo.it/TFujinami/CanvasRandomDrawjCanvaScript CasualJS版 http://jsdo.it/TFujinami/CanvasRandomDrawCasualJS jCanvas版 http://jsdo.it/TFujinami/CanvasRandomDrawjCanvas Processing版 http://jsdo.it/TFujinami/CanvasRandomDrawProcessing LibCanvas版 http://jsdo.it/TFujinami/CanvasRandomDrawLibCanvas CAKE版 http://jsdo.it/TFujinami/CanvasRandomDrawCake var object_number = 50; var object_size = 150; var margin = 15; var fps = 0; var mode = 0; var window_x = Number($(window).width()) - (margin * 2); var window_y = Number($(window).height()) - (margin * 2) - 50; var stage; var shape; var graphic; window.onload = Init; function Init(){ $('#canvasarea').click(function(){ mode < 2 ? mode++ : mode = 0 }); $('#canvasarea').attr({'width':window_x, 'height':window_y}); $('#canvasarea').css({'margin-left':margin, 'margin-top':margin}); $('#fps').css({'margin-left':margin}); var canvas = document.getElementById("canvasarea"); var context = canvas.getContext("2d"); stage = new Stage(context); for (var i=0; i<object_number; i++){ stage.addChild(new Shape()); } main(); viewFPSandMode(); } function main(){ var shape = new Shape(); var graphic = shape.graphics; var color = 'rgb(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ')'; if (mode == 0){ var sx = Math.floor(Math.random() * window_x); var sy = Math.floor(Math.random() * window_y); var ex = Math.floor(Math.random() * window_x); var ey = Math.floor(Math.random() * window_y); graphic.lineStyle(1, color).moveTo(sx, sy).lineTo(ex, ey).stroke(); } else { var x = Math.floor(Math.random() * (window_x - object_size)); var y = Math.floor(Math.random() * (window_y - object_size)); var w = Math.floor(Math.random() * object_size) + 1; var h = Math.floor(Math.random() * object_size) + 1; if (mode == 1){ graphic.beginFill(color, 1).drawRect(x, y, w, h); } else { graphic.beginFill(color, 1).drawEllipse(x, y, w, h); } } stage.removeChildAt(0); stage.addChild(shape); // $('#fps').text(object.length + 'objects'); for (var i=0; i<object_number; i++){ stage.getChildAt(i).alpha = 1 - (object_number - i) / object_number;; } fps++; setTimeout('main()', 0); } function viewFPSandMode(){ var view_mode = '' if (mode == 0){ view_mode = 'line'; } if (mode == 1){ view_mode = 'square'; } if (mode == 2){ view_mode = 'circle'; } $('#fps').text(fps + 'fps / mode:' + view_mode + ' (上記エリアをクリックで線→四角→丸)'); fps = 0; setTimeout('viewFPSandMode()', 1000); } <script src="http://casualjs.googlecode.com/svn/trunk/js/casual-0.1.min.js"></script> <canvas id="canvasarea"></canvas> <p id="fps"></p> body { background-color: black; margin: 0; } canvas { background-color: white; } p { color: white; font-size: 10pt; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? http://jsdo.it/TFujinami/CanvasRandomDraw のCasualJS版です。 画面をクリックすると線→四角→丸でローテーションします。 ★他に比べてパフォーマンスが悪いです。使い方が間違っているのかも。 CasualJS http://dothtml5.com/archives/20110325_casualjs.html ノーマル版 http://jsdo.it/TFujinami/CanvasRandomDraw EaselJS版 http://jsdo.it/TFujinami/CanvasRandomDrawEaselJS Gury版 http://jsdo.it/TFujinami/CanvasRandomDrawGury Raphael (SVG) 版 http://jsdo.it/TFujinami/SVGRandomDrawRaphael CSS版 http://jsdo.it/TFujinami/CSSRandomDraw oCanvas版 http://jsdo.it/TFujinami/CanvasRandomDrawoCanvas jCanvaScript版 http://jsdo.it/TFujinami/CanvasRandomDrawjCanvaScript CasualJS版 http://jsdo.it/TFujinami/CanvasRandomDrawCasualJS jCanvas版 http://jsdo.it/TFujinami/CanvasRandomDrawjCanvas Processing版 http://jsdo.it/TFujinami/CanvasRandomDrawProcessing LibCanvas版 http://jsdo.it/TFujinami/CanvasRandomDrawLibCanvas CAKE版 http://jsdo.it/TFujinami/CanvasRandomDrawCake Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author TFujinami URLhttp://r-ism.com/tfujinami/ 藤浪剛士 | Tsuyoshi Fujinami Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/31t9/js"></script> Canvas CasualJS Circle Draw HTML5 jQuery Line Object Random Square Discussion Questions on this code? Tags Canvas CasualJS Circle Draw HTML5 Line Object Random Square jQuery