HTML5 Canvasでランダムに図形を描く TFujinami Follow 2011-05-25 22:00:31 License: MIT License Fork8 Fav6 View11564 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 108 lines HTML 2 lines CSS 13 lines 画面をクリックすると線→四角→丸でローテーションします。 参考にしたサイト: 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/CanvasRandomDrawCake 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 = []; 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> HTML5 Canvasでランダムに図形を描く body { background-color: black; margin: 0; } canvas { background-color: white; } p { color: white; font-size: 10pt; } 画面をクリックすると線→四角→丸でローテーションします。 参考にしたサイト: 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/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 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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? 画面をクリックすると線→四角→丸でローテーションします。 参考にしたサイト: 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/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/ncPg/js"></script> Canvas Circle Draw HTML5 jQuery Line Object Random Square Discussion Questions on this code? Tags Canvas Circle Draw HTML5 Line Object Random Square jQuery Favorite by yanthyan kokima angelo gryng02 segu: CanvasCircleDrawHTML5LineRandom npoi: CanvasHTML5Draw Forked sort by latest page views favorite forked forked: HTML5 Canvasでランダムに図形を描 cogas_uasanb 10 2455 109/2/13 Canvas Circle Draw HTML5 Line Object Random Square jQuery forked: HTML5 Canvasでランダムに図形を描 osawakesukee 00 834 109/2/13 Canvas Circle Draw HTML5 Line Object Random Square jQuery 楕円アルゴリズムいくつか TFujinami 25 7669 109/2/13 Canvas Circle Ellipse HTML5 Random [比較][canvas] jQuery 開くな危険 ブラウザ落ちる TFujinami 00 1603 110/2/13 Test 1 2NEXT>>