我今天做了一个实验,看看我能用<div>
s 做什么。所以我做了一个简单的Paint-like程序,你可以用<div>
s来画。
$(window).mousemove(function(e){
if(!mousedown){
return false;
}
var x = e.clientX,
y = e.clientY;
drawDot(x,y,ele);
lastX = x;
lastY = y;
});
这是代码的一部分。它有效,但点之间存在间隙。所以我创建了一个名为的函数fillDot
,它将从 A 点(最后一点)到 B 点(当前点)画一条线。
drawDot(x,y,ele);
fillDot(lastX,lastY,x,y,ele);
function fillDot(lx,ly,x,y,canvas){
var rise = y - ly,
run = x - lx,
slope = rise / run,
yInt = y - (slope * x);
if( lx < x ){
for(var i = lx; i < x ; i+=.5){
var y = slope * i + yInt;
drawDot(i,y,canvas);
}
}else if( x < lx ){
for(var i = x; i < lx ; i++){
var y = slope * i + yInt;
drawDot(i,y,canvas);
}
}
}
只有当我绘制水平线时它才能正常工作。当我从上到下或从下到上绘制时,仍然会有间隙。我发现了一种叫做Bresenham 的线算法的东西,它可以做同样的事情,但我不知道如何使用它......
知道如何填充两者之间的所有点吗?
ps:我知道有<canvas>
,但我正在测试我能用它做什么<div>
。