Canvasをちょっとやってみる - 備忘録 python,統計,読書etc..

canvasに必要なツール・知識。
- html
- css
- javaScript
- エディタソフト(さくらエディタでもDwでも)
- プラウザ（javaScriptを使うのでChromeを推奨）

とりあえず四角形から描画してみる。
html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Canvasの練習</title>
</head>
<body>
<h1>Canvasの練習</h1>
<canvas id="mycanvas" width="400" height="200">
canvasに対応したプラウザを使用してください。
</canvas>
<script src="myscript.js"></script>
</body>
</html>

javascript

// myscript.js
window.onload = function(){
	draw();
	}
	
function draw(){
	var canvas = document.getElementById('mycanvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');
	
	ctx.strokeRect(10,10,50,50);
}