<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var context = canvas.getContext("2d");
context.beginPath();
hosi(context, 10, 10);
context.stroke();
}
function hosi(context, x, y){
context.moveTo(x,y);
context.lineTo(x+130, y+50);
context.lineTo(x+40, y+130);
context.lineTo(x+70, y+10);
context.lineTo(x+100, y+130);
context.lineTo(x,y);
context.stroke();
}
/*
//2個目
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(120, 60);
context.lineTo(240, 60);
context.stroke();
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(240, 60);
context.lineTo(150, 140);
context.stroke();
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(150, 140);
context.lineTo(180, 20);
context.stroke();
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(180, 20);
context.lineTo(210, 140);
context.stroke();
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(210, 140);
context.lineTo(120, 60);
context.stroke();
*/
/*
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(220, 60);
context.lineTo(340, 40);
context.stroke();
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(340, 40);
context.lineTo(340, 40);
context.stroke();
*/
</script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
<canvas id="SimpleCanvas" width="1000" height="800" style="background-color:#FFFFFF;"></canvas>
<div>線を引く</div>
</body>
</html>
