今天学习html5第二天了，该来写点东西了。html5实现画线，canvas

最新推荐文章于 2021-06-29 11:04:51 发布

top123xcode

最新推荐文章于 2021-06-29 11:04:51 发布

阅读量4.2k

点赞数

分类专栏： HTML5 文章标签： html5 浏览器 html opera button border

本文链接：https://blog.csdn.net/top123xcode/article/details/7162659

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<! doctype html>  
<html>  
<head>  
<script type="text/javascript">  
		function drawDiagonal(){
			//取得canvas元素及其绘图上下文
		 var c = document.getElementById("diagonal");
		 var cxt = c.getContext("2d");
		 //使用绝对坐标来创建一条路径
		 cxt.beginPath();
		 cxt.moveTo(0,0);
		 cxt.lineTo(140,70);
		 //将这条线绘制到canvas上
		 cxt.stroke();
		}
//		window.addEventListener("load",drawDiagonal,true);
</script>
</head>  
<body>
<canvas id="diagonal"   style="border: 1px solid"width="300" height="300"> 浏览器不支持此标签 </canvas>
<input type="button" value="画线" onClick="drawDiagonal();" />

</body>  
</html>

注释：1、window.addEventListener("load",drawDiagonal,true);
 网页加载就执行js ----addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数为 useCapture
也可以在页面添加一个按钮，然后调用js。
2、html5需要在ff，opera，等支持html5的浏览器上执行。

top123xcode

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
今天学习html5第二天了，该来写点东西了。html5实现画线，canvas

function drawDiagonal(){ //取得canvas元素及其绘图上下文 var c = document.getElementById("diagonal"); var cxt = c.getContext("2d"); //使用绝对坐标来创建一条路径 cxt.beginPath(); cxt.moveTo(0,0); cxt.lineT
复制链接

扫一扫