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

最新推荐文章于 2023-05-24 18:09:09 发布

lizhongyi188

最新推荐文章于 2023-05-24 18:09:09 发布

阅读量681

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/lizhongyi188/article/details/83971657

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

lizhongyi188

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas使用--绘制一条直线

&lt;!DOCTYPE html&gt;&lt;Html&gt; &lt;head&gt; &lt;meta charset="UTF-8"/&gt; &lt;script&gt; function drawLine(){ // 取得canvas对象及其上下文对象 var canvas=document.getElementById(...
复制链接

扫一扫