永遠無窮の創作庫

パソコンで色々やってみるブログです。自作小説、詩、TRPG、短歌、プログラミングなど。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
初めて当ブログに訪れた方や何度か当ブログにお越し頂いている皆様。もしブログの内容を気に入って頂けましたらRSSリーダーの登録やFacebookページのいいね!をよろしくお願いします。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

html5のcanvas使用雑感など

こんばんはー。
昨日、HTML5のcanvasを使って、サイトを一つつくってみたのでそのことについて書いてみたいと思います。永無です。

書いたhtmlと、javascriptと、cssを載せてみます。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" href="css/ss01.css">
<script src="js/canvas.js"></script>
<!--[if IE]><script src="js/excanvas.js"></script><![endif]-->
<title>Title</title>>
</head>
<body onLoad="snow(); ss()">
<div id="contents">
<canvas id="m_canvas" width="800" height="400">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>

<!-- /contents --></div>

</body>
</html>

Javascrpt (js/canvas.js)

kazu = 100;
tame = 50;

s = new Array(kazu); 
var canvas;
var context;

var snowMenber = function(x, y, xa, ya, s) {
	this.x = x;
	this.y = y;
	this.xa = xa;
	this.ya = ya;
	this.s = s;
	this.draw = function() {
		if (this.y >= -20) {
			context.beginPath();
			context.fillStyle = 'rgba(0, 0, 0, 0.1)';
			context.arc(this.x, this.y, 10 * this.s, 0, 
					Math.PI * 2, false);
			context.fill();
		}
		return;
	};
	this.move = function() {
		this.xa += parseInt(Math.random() * 5) - 2;
		if (this.xa < -10) this.xa = -10;
		if (this.xa > 10) this.xa = 10;

		this.ya += parseInt(Math.random() * 3) - 1;
		if (this.ya < 3) this.ya = 3;
		if (this.ya > 8) this.ya = 8;
		this.x += this.xa;
		this.y += this.ya;
		if (this.y > 420) this.y = -20;
		if (this.x > 810) this.x = -10;
		if (this.x < -10) this.x = 810;

		return;
	};
}
for (i = 0; i < kazu; i++) {
	s[i] = new snowMenber(parseInt(Math.random() * 820) - 20, 
		parseInt(Math.random() * 380) - 400 - tame, 
		0, parseInt(Math.random() * 5) + 3, Math.random());
}

function snow() {
	canvas = document.getElementById('m_canvas');
	context = canvas.getContext('2d');
	if ( ! canvas || ! canvas.getContext ) { return false; }

	for (i = 0; i < kazu; i++) {
		s[i].draw();
	}
}

function snowDraw() {
	context.clearRect(0, 0, canvas.width, canvas.height);
	for (i = 0; i < kazu; i++) {
		s[i].move();
		s[i].draw();
	}
}

function ss() {
	setInterval("snowDraw()",100);
}

CSS (css/ss01.css)

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin:0; padding:0;
}
table {
	border-collapse:collapse; border-spacing:0;
}
fieldset, img {
	border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal; font-weight:normal;
}
ol, ul {
	list-style:none;
}
caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%; font-weight:normal;
}
q:before, q:after {
	content:”;
}
abbr, acronym {
	border:0;
}

#contents {
	width: 800px;
	height: 400px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -200px 0 0 -400px;
	padding: 0px;
	border: 1px solid #000;
	background-image: url(../img/logo.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
こんな感じです。
とりあえず、雪を降らせたいなと思い、最初は画像ファイルを降らせていたんですが、著作権フリーの良い素材がなかったので結局、円を降らせることにしました。

イメージは中央のdivの中央に表示しているロゴだけで、それも適当な大きさならなんでもいいです。

if IEで読み込んでいるJavascriptは、IE8以前でcanvasを表示させるためのライブラリで、ExplorerCanvasというものです。
ExplorerCanvas
読み込むだけで、canvasが使えるようになるようで、良い感じです。

サンプルを載せておきます。
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
うまく表示されるかな?

canvasの使い方が大体わかったので、これからもいろいろつくってみようと思います。
バウンディングボックス位ならすぐ作れそうだしー。作ろうかなー。

ま、そんなところです。
では、今回はこのへんで、かな。すごく長くなったしー。
おわりー。 http://eienmukyu.com/ このエントリーをはてなブックマークに追加
初めて当ブログに訪れた方や何度か当ブログにお越し頂いている皆様。もしブログの内容を気に入って頂けましたらRSSリーダーの登録やFacebookページのいいね!をよろしくお願いします。
[ 2012/01/30 22:13 ] プログラミング | TB(-) | CM(-)
プロフィール

永無(忘年会P)

Author:永無(忘年会P)
永無です。ニコニコ動画では忘年会Pという名前を使用しています。
このブログでは、広く浅く、いろんな事に挑戦し、記事にしています。

ゲームを作ろう、小説を書こう、と、日々思いつつやってません。
アイデアだけが溜まっていく毎日です。

どうすればより面白いブログになるのか、試行錯誤中です。
よろしくお願いします。

興味があること:
動画作成,ゲーム作成,小説書き,
詩作,UTAU,MMD,TRPG,短歌,合唱,
将棋,麻雀,読書,X)HTML,CSS,
PHP,Javascript,ActionScript,
C++,HSP,Java



この日記のはてなブックマーク数

作った動画:mylist/22266195
TRPG SNS
ぬっぽん
うたのわ
永遠無窮の本棚(はてなブログ)
永遠無窮のメモ帳(Tumblr)

最新コメント
最新トラックバック
FC2カウンター
Twitter

Twitter < > Reload

ブログランキング
人気記事
ブログパーツ

フィードメーター - 永遠無窮の創作庫



ブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。