2011-05-25 22:00:31

License: MIT License

Fork: 8

Fav: 6

View: 11655

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 108 lines
HTML 2 lines
CSS 13 lines

HTML5 Canvasでランダムに図形を描く
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 ctx;
var object = [];

var canvas = document.getElementById('canvasarea');
  ctx = canvas.getContext('2d');

for (var i=0; i<object_number; i++){ object[i] = {} }
  object[0] = setPath();

main();
  viewFPSandMode();
}

function main(){
  ctx.clearRect(0, 0, window_x, window_y);

for (var i=object_number-1; i>=0; i--){
    object[i].ca = (object_number - i) / object_number;
    renderObject(object[i]);
  }

object.pop();
  var new_object = setPath();
  object.unshift(new_object);

fps++;
  setTimeout('main()', 0);
}

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

画面をクリックすると線→四角→丸でローテーションします。参考にしたサイト： Canvas - HTML5.JP http://bit.ly/eMl5fy ベジェ曲線で楕円を描く(3) 生存日記 http://bit.ly/dI4JZM ノーマル版 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 ctx; var object = []; 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'); ctx = canvas.getContext('2d'); for (var i=0; i<object_number; i++){ object[i] = {} } object[0] = setPath(); main(); viewFPSandMode(); } function main(){ ctx.clearRect(0, 0, window_x, window_y); for (var i=object_number-1; i>=0; i--){ object[i].ca = (object_number - i) / object_number; renderObject(object[i]); } object.pop(); var new_object = setPath(); object.unshift(new_object); fps++; setTimeout('main()', 0); } function setPath(){ var object = {} object.type = mode; if (mode == 0){ object.sx = Math.floor(Math.random() * window_x); object.sy = Math.floor(Math.random() * window_y); object.ex = Math.floor(Math.random() * window_x); object.ey = Math.floor(Math.random() * window_y); } else { object.x = Math.floor(Math.random() * (window_x - object_size)); object.y = Math.floor(Math.random() * (window_y - object_size)); object.w = Math.floor(Math.random() * object_size) + 1; object.h = Math.floor(Math.random() * object_size) + 1; } object.cr = Math.floor(Math.random() * 256); object.cg = Math.floor(Math.random() * 256); object.cb = Math.floor(Math.random() * 256); return(object); } function renderObject(object){ if (object.type == 0){ ctx.beginPath(); ctx.strokeStyle = 'rgba(' + object.cr + ', ' + object.cg + ', ' + object.cb + ', ' + object.ca + ')'; ctx.moveTo(object.sx, object.sy); ctx.lineTo(object.ex, object.ey); ctx.stroke(); } if (object.type == 1){ ctx.fillStyle = 'rgba(' + object.cr + ', ' + object.cg + ', ' + object.cb + ', ' + object.ca + ')'; ctx.fillRect(object.x, object.y, object.w, object.h); } if (object.type == 2){ var right = object.x + object.w var bottom = object.y + object.h var width = object.w / 2; var height = object.h / 2; var cx = object.x + width; var cy = object.y + height; var pw = 4 * (Math.sqrt(2) - 1) * width / 3; var ph = 4 * (Math.sqrt(2) - 1) * height / 3; ctx.beginPath(); ctx.fillStyle = 'rgba(' + object.cr + ', ' + object.cg + ', ' + object.cb + ', ' + object.ca + ')'; ctx.moveTo(cx, object.y); ctx.bezierCurveTo(cx + pw, object.y, right, cy - ph, right, cy); ctx.bezierCurveTo(right, cy + ph, cx + pw, bottom, cx, bottom); ctx.bezierCurveTo(cx - pw, bottom, object.x, cy + ph, object.x, cy); ctx.bezierCurveTo(object.x, cy - ph, cx - pw, object.y, cx, object.y); ctx.fill(); } } 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); } <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/ncPg/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

yanthyan

kokima

angelo

gryng02

segu:

Canvas Circle Draw HTML5 Line Random

npoi:

Canvas HTML5 Draw

Forked

sort by

forked: HTML5 Canvasでランダムに図形を描

cogas_uasanb

1
0
2514

109/2/13
- Canvas
- Circle
- Draw
- HTML5
- Line
- Object
- Random
- Square
- jQuery

forked: HTML5 Canvasでランダムに図形を描

osawakesukee

109/2/13
- Canvas
- Circle
- Draw
- HTML5
- Line
- Object
- Random
- Square
- jQuery

楕円アルゴリズムいくつか

TFujinami

2
5
7703

109/2/13
- Canvas
- Circle
- Ellipse
- HTML5
- Random
- [比較][canvas]
- jQuery

開くな危険ブラウザ落ちる

TFujinami

0
0
1610

110/2/13
- Test

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

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by

Forked