研究html和js网页画图的问题

zangcf · 发表于 2016-8-16 11:19:43

研究html和js网页画图的问题：：
从哪里开始学习？
1，网上百度相关资料
2，看看韩顺平的视频中间，有没有相关的例子可以参考的。

zangcf · 发表于 2016-8-16 11:26:02

先研究网络的资料，实现动手和理论都OK！

zangcf · 发表于 2016-8-16 11:27:56

本帖最后由 zangcf 于 2016-8-16 11:42 编辑

http://www.cnblogs.com/carekee/articles/1723997.html
先研究这篇文章，把代码copy到Editplus++中间，然后保存为test.html,运行效果看看！
================
测试的结果好像这个程序只能显示鼠标的坐标，好像无法画线。
这个程序的主要问题，好像抓不到event!

zangcf · 发表于 2016-8-16 11:47:19

本帖最后由 zangcf 于 2016-8-16 12:00 编辑

http://www.jb51.net/article/53990.htm
这个网站的例子是ok的
是可以工作的，认真研究这个例子，顺便熟悉js语言。
======================================
这个程序被我保存在

D:\project\91xuepai\nodejs\test1.html

复制代码

今天一定要研究透这个程序

<!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>test line</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>

复制代码

zangcf · 发表于 2016-8-16 11:59:49

还有一些参考文章，百度搜“javascript 屏幕画线的处理”可以找到

zangcf · 发表于 2016-8-17 16:19:11

采用上面的方法，进行简单的画点操作没有问题，但是，如果像手写这种频繁操作DOM的，会导致浏览器响应不过来，会死机。

		自动登录	找回密码
密码			立即注册

研究html和js网页画图的问题

浏览过的版块