2011-05-25 22:05:59

License: MIT License

Fork: 0

Fav: 0

View: 4663

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 75 lines
HTML 5 lines
CSS 13 lines

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;

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);
}

HTML5 Canvasでランダムに図形を描く CasualJS版

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/CanvasRandomDrawCakevar 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; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

TFujinami

URL
http://r-ism.com/tfujinami/

藤浪剛士 | Tsuyoshi Fujinami

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/31t9/js"></script>

QR Code

Discussion

Questions on this code?

HTML5 Canvasでランダムに図形を描く CasualJS版

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags