2012-04-29 00:11:37

License: MIT License

Fork: 0

Fav: 0

View: 326

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 70 lines
HTML 12 lines
CSS 11 lines

今日やったオブジェクト指向の知識を生かしてCanvasで遊んでみました。
簡単なことしかやってません。

Canvasで円グラフっぽいのをグルグル

var FPS = 1000 / 60,
    TWOPI = Math.PI * 2,
    PI = Math.PI,
    CANVAS_WIDTH = 400,
    CANVAS_HEIGHT = 400;

var canvas = document.getElementById("canvas");

var ballArray = [],
    maxBallVal =　50;

if(canvas.getContext){
    var ctx = canvas.getContext("2d");
    ctx.globalAlpha = 0.9;
}

function canvasClear(){
    ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
}

var BallConstructor = function(x, y, ballRadius){
    this.ballRadius = ballRadius || Math.ceil(Math.random() * 50);
    this.maxX = CANVAS_WIDTH - this.ballRadius;
    this.maxY = CANVAS_HEIGHT - this.ballRadius;
    this.minX = this.ballRadius;
    this.minY = this.ballRadius;
    this.x = x || Math.ceil((Math.random() * (this.maxX - this.minX))) + this.minX;
    this.y = y || Math.ceil((Math.random() * (this.maxY - this.minY))) + this.minY;
    this.startAngle = 0;
    this.endAngle = PI;

this.addAngleVal = Math.PI / 60;
};

BallConstructor.prototype = {
    draw: function(){
	ctx.beginPath();
	ctx.fillStyle = "#FF0000";
	ctx.arc(this.x, this.y, this.ballRadius, this.startAngle, this.endAngle, false);
	ctx.fill();

ctx.beginPath();
	ctx.fillStyle = "#000000";
	ctx.arc(this.x, this.y, this.ballRadius, this.startAngle, this.endAngle, true);
	ctx.fill();

ctx.beginPath();
	ctx.strokeStyle = "#000000";
	ctx.arc(this.x, this.y, this.ballRadius, 0, TWOPI, false);
	ctx.stroke();
    },

addAngle: function(){
	this.startAngle += this.addAngleVal;
	this.endAngle += this.addAngleVal;                
    }
};

var animateFlag = setInterval(
    function(){
	canvasClear();
	if(ballArray.length <= maxBallVal){
	    ballArray.push(new BallConstructor());
	}

for(var i in ballArray){
	    ballArray[i].draw();
	    ballArray[i].addAngle();
	}
    }, FPS);

Canvasで円グラフっぽいのをグルグル

今日やったオブジェクト指向の知識を生かしてCanvasで遊んでみました。簡単なことしかやってません。var FPS = 1000 / 60, TWOPI = Math.PI * 2, PI = Math.PI, CANVAS_WIDTH = 400, CANVAS_HEIGHT = 400; var canvas = document.getElementById("canvas"); var ballArray = [], maxBallVal =　50; if(canvas.getContext){ var ctx = canvas.getContext("2d"); ctx.globalAlpha = 0.9; } function canvasClear(){ ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } var BallConstructor = function(x, y, ballRadius){ this.ballRadius = ballRadius || Math.ceil(Math.random() * 50); this.maxX = CANVAS_WIDTH - this.ballRadius; this.maxY = CANVAS_HEIGHT - this.ballRadius; this.minX = this.ballRadius; this.minY = this.ballRadius; this.x = x || Math.ceil((Math.random() * (this.maxX - this.minX))) + this.minX; this.y = y || Math.ceil((Math.random() * (this.maxY - this.minY))) + this.minY; this.startAngle = 0; this.endAngle = PI; this.addAngleVal = Math.PI / 60; }; BallConstructor.prototype = { draw: function(){ ctx.beginPath(); ctx.fillStyle = "#FF0000"; ctx.arc(this.x, this.y, this.ballRadius, this.startAngle, this.endAngle, false); ctx.fill(); ctx.beginPath(); ctx.fillStyle = "#000000"; ctx.arc(this.x, this.y, this.ballRadius, this.startAngle, this.endAngle, true); ctx.fill(); ctx.beginPath(); ctx.strokeStyle = "#000000"; ctx.arc(this.x, this.y, this.ballRadius, 0, TWOPI, false); ctx.stroke(); }, addAngle: function(){ this.startAngle += this.addAngleVal; this.endAngle += this.addAngleVal; } }; var animateFlag = setInterval( function(){ canvasClear(); if(ballArray.length <= maxBallVal){ ballArray.push(new BallConstructor()); } for(var i in ballArray){ ballArray[i].draw(); ballArray[i].addAngle(); } }, FPS);<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css" media="screen"> </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> </body> </html>html, body{ margin:0px; padding:0px; background: #000; } canvas{ background: #fff; position:absolute; top:32px; left:32px; }

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

bluesbug

フリーでフロントエンドエンジニアやってます。ご依頼などありましたらTwitter、またはメール【bluesbug(at)gmail.com】までどうぞ。

ポートフォリオ http://gl-pf.tumblr.com/

Size

Width: px
Height: px

code

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

QR Code

Discussion

Questions on this code?

Canvasで円グラフっぽいのをグルグル

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Tweet

Twitter

Discussion

Tags