日期:2014-05-17  浏览次数:20614 次

html5 canvas使用--绘制一条直线

?

<!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>