<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
font-size: x-small;
}
</style>
<script type="text/javascript">
/**
画点
*/
function makedot(x, y){
pointDiv = "<div style='height:1px;position:absolute;left:" + x +
"px;top:" + y + "px;width:1px;background:#f00;overflow:hidden'></div>";
return pointDiv;
}
/**
根据两点坐标画直线。
*/
function line(x1,y1,x2,y2){
var slope; //斜率
var direction;//坐标运动方向
var tx = x2 - x1;
var ty = y2 - y1;
if(tx == 0 && ty == 0)return;
var points = "";
var axis;//坐标轴上的坐标
if(Math.abs(tx) >= Math.abs(ty)){//在x轴上移动
direction = tx > 0 ? 1 : -1;
tx = Math.abs(tx);
slope = ty / tx;
axis = x1;
for(i = 0; i < tx; i ++){
points += makedot(axis, y1 + i * slope);
axis += direction;
}
}else{//在y轴上移动
direction = ty > 0 ? 1 : -1;
ty = Math.abs(ty);
slope = tx / ty;
axis = y1;
for(i = 0; i < ty; i ++){
points += makedot(x1 + i * slope, axis);
axis += direction;
}
}
var container = document.getElementById("container");
container.innerHTML += points;
}
var oldPoint = null;
//获取鼠标位置
function mousePosition(ev){
ev = ev || window.event;
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
var doc = document.documentElement, body = document.body;
var pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
var pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
return {x:pageX, y:pageY};
}
function recordPoint(ev){
var point = mousePosition(ev);
if(oldPoint != null){
line(oldPoint.x, oldPoint.y, point.x, point.y);
}
oldPoint = point;
}
</script>
</head>
<body>
<div id="container" style="width: 1000px; height: 600px; border:1px #bfbfbf solid;" onclick="recordPoint(event);">
</div>
<script type="text/javascript">
//line(19,19,22,300);
</script>
</body>
</html>
分享到：
相关推荐
在JavaScript编程中，实现鼠标画线功能是一项常见的交互设计需求，尤其在图形编辑、绘图应用或者游戏开发中。这个“js 鼠标画线 兼容主流浏览器”的项目显然是为了提供一个能够跨浏览器工作的解决方案，确保在IE7及...
在JavaScript中，我们可以利用Canvas API来实现各种复杂的图形操作，包括鼠标画图和线程画线。本教程将深入探讨如何使用Canvas进行这些功能。 首先，创建一个Canvas元素非常简单，只需在HTML中添加一个`<canvas>`...
总结来说，通过JavaScript结合鼠标事件和画布API，我们可以轻松实现鼠标画线和绘制多边形的功能。对于IE7-9等老版本浏览器，我们需要额外处理兼容性问题，确保功能在各种环境下都能正常工作。在实际项目中，这些功能...
"跟随鼠标画线applet"是一个基于Java Applet技术的简单图形绘制程序，它允许用户在网页上通过鼠标操作来绘制线条。Applet是Java的一种小程序，可以嵌入到HTML页面中，为用户提供交互式的体验。 这个applet的核心...
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要...3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点移动保持连接状态 6、附带节点鼠标右键弹出自定义菜单代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <... <head> <meta ... charset=utf-8" />....style
在本主题中，我们将深入探讨如何使用JavaScript在网页中实现画线的效果。这个压缩包"javascript经典特效---在页面中画线.rar"包含了具体实现这一特效的HTML文件——"在页面中画线.htm"。 在网页上画线涉及到的主要...
在提供的压缩包文件"drawLine2"中，可能包含了更多的示例代码，比如如何实现动态画线、多条线的组合、响应鼠标事件进行画线等。这些高级功能可以让用户在网页上自由地绘制图形，或者实现特定的交互效果。 总的来说...
这个上下文提供了众多方法，如`moveTo()`, `lineTo()`, `stroke()`, `fill()`等，用于绘制线、形状和图像。 在这个特效中，关键在于监听鼠标的移动事件，即`mousemove`事件。当用户在Canvas上移动鼠标时，事件处理...
同时，它可能还包含了一些交互式操作，比如鼠标绘制、删除线段等，这将帮助你更好地理解和掌握OpenLayers 3的画线功能。 总之，OpenLayers 3 提供了丰富的API和工具，使开发者能够轻松地在Web地图上绘制各种图形，...
其次，JavaScript的事件监听是实现鼠标跟随效果的关键。通过`addEventListener('mousemove', callback)`监听鼠标的移动事件，每当鼠标位置改变时，回调函数会被调用，更新Canvas上的线条。 1. `event.clientX` 和 `...
本实例将重点讨论如何使用QPainter在Qt中画线，以及与之相关的知识点。 首先，QPainter的使用通常包含以下几个步骤： 1. **创建QPainter对象**：在开始绘图之前，你需要创建一个QPainter对象，并指定绘图的目标，...
动态画线和曲线通常通过编程语言实现，例如JavaScript（配合HTML5的Canvas API）或者Python（使用matplotlib库）。在给定的压缩包文件中，"view5.html"很可能是一个包含实现动态画线代码的网页，我们可以期待它使用...
由于提供的文件信息中并没有包含具体的HTML5和JavaScript动画基础的知识点，我只能根据标题和描述中提及的内容，结合HTML5和JavaScript的相关技术，为您详细解释在创建HTML5和JavaScript动画时所需掌握的基础知识点...
例如，`CanvasPainter.js`可能包含了一组用于绘画的工具和方法，`CPAnimator.js`可能实现了帧动画功能，使线条绘制更流畅，而`CPDrawing.js`可能处理了用户与Canvas的交互，比如监听鼠标事件来追踪用户的画线动作。...
本资源"CSS3鼠标滑过动画线条边框特效.zip"显然是一个包含示例代码的压缩包，用于演示如何利用CSS3实现当鼠标悬停时，元素边框产生动态线条动画的效果。这种特效可以增加用户交互性，提升网站或应用的视觉吸引力。 ...
同时，结合JavaScript或现代前端框架（如Vue.js或React.js）可以实现更复杂的交互逻辑。 总结起来，CSS3的鼠标悬停动画效果是通过结合关键帧动画、过渡和变形等特性来实现的，这为网页设计带来了丰富的交互体验和...
为了实现自定义画线，通常需要监听用户的鼠标或触摸事件，比如`mousedown`、`mousemove`和`mouseup`。当用户按下鼠标时开始绘制，移动鼠标时更新线条，松开鼠标时结束绘制。 7. **保存和恢复状态**： 如果需要在...
在这个特效中，粒子跟随动画通过JavaScript编程实现，当用户移动鼠标时，粒子会根据鼠标的移动轨迹进行动态调整，营造出一种引人入胜的互动感。 首先，让我们详细了解一下Canvas API。Canvas是一个二维绘图上下文，...