html 5 canvas使用--直線を描画

1293 ワード

<!DOCTYPE html>
<Html>
	<head>
		<meta charset="UTF-8"/>
		<script>
			function drawLine(){
			   //   canvas         
			   var canvas=document.getElementById("drawLine");
			   var context=canvas.getContext('2d');
			   //      
			   context.beginPath();
			   //   
			   context.moveTo(70,140);
			   //   
			   context.lineTo(140,70);
			   //  
			   context.stroke();
			}
			window.addEventListener("load",drawLine,true);
		</script>
	</head>
	<title>html5      </title>
	<body>
		 <div id="info"></div>
		 <canvas id="drawLine" style="border:1px solid;width:200px;height:200px;"></canvas>
		 <script>
		 //         HTML5
			try{
					document.createElement("canvas").getContext("2d");
					document.getElementById("info").innerHTML="      HTML5";
				}catch(e){
					document.getElementById("info").innerHTML="       HTML5"
				}
		 </script>
	</body>
</Html>