您的位置：首页 > Web前端 > HTML5

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

2011-12-29 17:11 423 查看

<! 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的浏览器上执行。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航