初めてhtml5のcanvas使ってみた

参考サイト
いっぱいありすぎて…覚えているのはこちら
http://www.html5.jp/canvas/index.html
http://yoppa.org/taumedia10/2065.html
http://tech.kayac.com/archive/canvas-tutorial.html

歯車を描いてそれが回ったらかっこよくない？
かっこいい！！
gifアニメでつくっても、なんか物足りないな…
canvas使ってつくってみよう！

みたいな軽いノリではじめました。

でも、思ったよりも簡単にできたかも。

しかし、デザインが変わって、実際は使わなくなりました。(´・ω・`)

歯車を描くアニメーションは途中までしか描いてなかったのが唯一の救いかな？w
あ、でも、最後までやってないけど、割と簡単に書けますよぉ～

できたもののスクショ

canvasで歯車の絵をつくって、その場で回転します。

ソース一式。どーーーーーーん

<!DOCTYPE html>

<head>

window.onload = function() {

// FPS計算 ---------------------------------------------

var FPS = function(target) {

this.target = target; // 目標FPS

this.interval = 1000 / target; // setTimeoutに与えるインターバル

this.checkpoint = new Date();

this.fps = 0;

};

FPS.prototype = {

// checkからcheckまでの時間を元にFPSを計算

check: function() {

var now = new Date();

this.fps = 1000 / (now - this.checkpoint);

this.checkpoint = new Date();

// 現在のFPSを取得

getFPS: function() {

return this.fps.toFixed(2);

// 次回処理までのインターバルを取得

getInterval: function() {

var elapsed = new Date() - this.checkpoint;

return this.interval - elapsed > 10 ? this.interval - elapsed : 10;

}

};

// メイン処理 ------------------------------------------

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

var cc = canvas.getContext('2d');

var theta = 0.0;

var rectWidth = 140;

var rectHeight = 140;

// 30FPSでアニメーション

var fps = new FPS(30);

var loop = function() {

fps.check();

cc.save();

// キャンバスをクリア

cc.beginPath();

cc.clearRect(0, 0, canvas.width, canvas.height);

cc.beginPath();

// 回転の中心は原点なので、

// 一度図形の中心を原点に移してから回転させて

// 元の場所に戻す

cc.translate(canvas.width / 2, canvas.height / 2);

cc.rotate(theta);

cc.translate(-rectWidth / 2, -rectHeight / 2);

//歯車生成

//内側

//丸

cc.beginPath();

cc.lineWidth = 1.5;

cc.arc(70, 70, 50, 0, 360 * Math.PI / 180, false);

cc.stroke();

//中

cc.beginPath();

cc.lineWidth = 1;

cc.arc(70, 70, 10, 0, 360 * Math.PI / 180, true);

cc.stroke();

//横棒

cc.moveTo(60, 70);

cc.lineTo(80, 70);

cc.stroke();

//縦棒

cc.moveTo(70, 60);

cc.lineTo(70, 80);

cc.stroke();

//外側

//上

cc.moveTo(60, 20);

cc.lineTo(60, 10);

cc.lineTo(80, 10);

cc.lineTo(80, 20);

cc.stroke();

//右

cc.moveTo(120, 60);

cc.lineTo(130, 60);

cc.lineTo(130, 80);

cc.lineTo(120, 80);

cc.stroke();

//下

cc.moveTo(60, 120);

cc.lineTo(60, 130);

cc.lineTo(80, 130);

cc.lineTo(80, 120);

cc.stroke();

//左

cc.moveTo(20, 60);

cc.lineTo(10, 60);

cc.lineTo(10, 80);

cc.lineTo(20, 80);

cc.stroke();

cc.lineWidth = 1;

cc.rotate( 45 * Math.PI / 180 );

//右上

cc.moveTo(90, -50);

cc.lineTo(90, -60);

cc.lineTo(110, -60);

cc.lineTo(110, -50);

cc.stroke();

//右下

cc.moveTo(149, -10);

cc.lineTo(159, -10);

cc.lineTo(159, 10);

cc.lineTo(149, 10);

cc.stroke();

//左下

cc.moveTo(90, 50);

cc.lineTo(90, 60);

cc.lineTo(110, 60);

cc.lineTo(110, 50);

cc.stroke();

//左上

cc.moveTo(49, -10);

cc.lineTo(39, -10);

cc.lineTo(39, 10);

cc.lineTo(49, 10);

cc.stroke();

cc.restore();

theta += 1 * Math.PI / 180;

if(Math.PI * 2 < theta) {

theta = 0;

}

setTimeout(loop, fps.getInterval());

};

loop();

};

</script>

</head>

<body>

</body>

</html>

楽しかったからいいや♪