手順
以下の二つのファイル
- test.html
- test.js
を作成する
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript Sample</title>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">document.addEventListener('DOMContentLoaded', function(){main();});</script>
</head>
<body>
<div id="test_canvas"></div>
</body>
</html>
test.js
var main = function() {
var targetDiv = document.getElementById('test_canvas');
if (targetDiv == null) {
return;
}
var canvas = document.createElement("canvas");
canvas.height = 500;
canvas.width = 500;
targetDiv.appendChild(canvas);
var ctx = canvas.getContext("2d");
var array = [8,256,32,128,100,64];
drawChart(ctx, array);
}
var drawChart = function(canvasCtx, array) {
for(var i = 0; i < array.length; i++) {
var width = 20;
var height = array[i];
var x = i * width * 2;
var y = 300 - height;
canvasCtx.fillRect(x, y, width, height);
}
}