JavaScript实现手动画线

JavaScript简单画线功能

最新推荐文章于 2023-04-08 21:18:37 发布

weixin_30546933

最新推荐文章于 2023-04-08 21:18:37 发布

阅读量221

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/glacierh/archive/2008/08/08/1263591.html

本文介绍了一个使用JavaScript实现的基本画线功能。通过监听鼠标点击和移动事件，在网页上绘制线条。支持单击开始画线，双击结束画线。

在网上搜索了一些JavaScript画线的代码，综合了几个例子，作了一些修改和整合，实现了画线的功能，但是只是很简单的功能，只能实现单击画线，双击结束，由于本人初学JS，还不知道怎么实现撤消，及清除。页面代码如下：

<html xmlns:v="http://www.eglic.com/">

<head>

<title>页面画线</title>

<meta name="ContentType" content="text/html" />

<meta name="CharSet" content="GB2312" />

<script language="javascript">

var Working=false;

var points = [];

var lastPoint =

{x:0,y:0};

var line = null;

document.ondblclick=function ()

{

if(!Working) return;

points = [];

lastPoint =

{x:0,y:0}

Working=false;

}

document.onclick=function ()

{

if(!Working)

{

Working=true;

}

var s='<v:line from="'+event.x+','+event.y+'" to="'+event.x+','+event.y+'" style="position:absolute;left:0px;top:0px;"></v:line>';

lastPoint.x = event.x;

lastPoint.y = event.y;

points.push(

{x:event.x,y:event.y} );

document.getElementById("show").innerHTML = "X:"+ event.x + " Y:" + event.y;

document.getElementById("show").style.display="";

var o=document.createElement(s);

document.body.insertAdjacentElement('BeforeEnd',o);

line = o;

}

document.onmousemove=function ()

{

if(!Working) return;

line.to = event.x + "," + event.y;

document.getElementById("dshow").innerHTML = "X:"+ event.x + " Y:" + event.y;

document.getElementById("dshow").style.display="";

}

</script>

<style type="text/css">

v\:*

{behavior:url(#default#VML);}

</style>

</head>

<body>

<div id="show" style="border:5px solid #000;width:200px;height:30px;line-height:30px;text-align:center;display:none">

</div>

<div id="dshow" style="border:5px solid #000;width:200px;height:30px;line-height:30px;text-align:center;display:none">

</div>

</body>

</html>

转载于:https://www.cnblogs.com/glacierh/archive/2008/08/08/1263591.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。