HTML5のcanvas入門メモ
http://memememomo.hatenablog.com/entry/20100512/1273612997
HTML 5 canvas要素 + Javascriptで作る、動的コンテンツ
http://yoppa.org/taumedia10/2065.html
一定時間で繰り返す（setInterval）
http://www.pori2.net/js/timer/1.html
HTML5のcanvasを使用し、１０本の斜線を引いたのですが、
http://q.hatena.ne.jp/1370252280
Canvasアニメーションの基礎
http://nezzscript.jimdo.com/0-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB/canvas%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E5%9F%BA%E7%A4%8E/
MdN:canvasを使ってグラフを描く
http://www.mdn.co.jp/di/articles/2657/?page=4
上記のサイトを参考に作ったグラフ↓
HTML5サンプル
★ソースコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5サンプル</title>
<script type="text/javascript">
window.onload = function(){
y=max_height=438;
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext('2d');
int = setInterval(draw,40); //描くスピード
function draw(){
ctx.clearRect(0,0,640,480); //いったん描いた図形を消す
y=y-10;
h=max_height-y;
ctx.save();
ctx.beginPath();//図形を変形して描画
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(60,y,30,h);
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(120,y,30,h);
ctx.stroke();
ctx.restore();}
}
</script>
<style>
canvas{
margin: 0 auto;
padding:30px;
background:red;
}
</style>
</head>
<body>
<canvas id="canvas1" width="640" height="480" />
このコンテンツの表示にはCANVASに対応したブラウザをご利用ください
</canvas>
</body>
</html>
線を徐々に表示するやり方は、settimeoutを使って、小刻みに線を表示させる。
数式でｘ、ｙの数値を出す。
数式は、var,forの使い道を知らないとかけない。
