Javascript 优化画布绘制以生成连续路径

这是一个用红色填充画布方格的脚本。 我正在寻找一些技巧，如何优化我的脚本以连续填充方块，而不需要像这里这样切碎：

我试图分离和合并一些函数，但找不到解决方案。 这是我的密码和密码：

---

HTML:

JavaScript（已更新）：

var canvas=document.getElementById（'plan'）；
var context=canvas.getContext（'2d'），
wt=画布宽度，
ht=画布高度；
var-down=false；
var draw=函数（e）{}；
window.onload=grid（）；
变量oldPos={
mX:0，
我的：0
};
var dPos={
mX:0，
我的：0
};
变量curPos={
mX:0，
我的：0
};
draw.to=函数（X，Y）{
oldPos=getMousePos（canvas，e）；//更新位置
var mposX=X，
mposY=Y；
mposX=mposX-mposX%5；
mposY=mposY-mposY%5；
context.fillStyle=“红色”；
context.fillRect（mposX+0.5，mposY+0.5，5，5）；
};
draw.single=函数（e）{
oldPos=getMousePos（画布，e）；
var mpos=getMousePos（canvas，e）；
mpos.mX=mpos.mX-mpos.mX%5；
mpos.mY=mpos.mY-mpos.mY%5；
context.fillStyle=“红色”；
context.fillRect（mpos.mX+0.5，mpos.mY+0.5,5,5）；
};
draw.move=函数（e）{
如果（向下）{
curPos=getMousePos（画布，e）；
dPos.mX=Math.abs（curPos.mX-oldPos.mX）；//新旧之间的距离（增量X）
dPos.mY=Math.abs（curPos.mY-oldPos.mY）；//增量Y
如果（dPos.mX>=5 | | dPos.mY>=5）{//如果距离大于5px hz或5px垂直
LightIntermediateSquare（oldPos.mX、oldPos.mY、curPos.mX、curPos.mY）；//^连接它们
}否则{
draw.single（e）；//简单
}
}
};
draw.start=函数（e）{
e、 预防默认值（）；
向下=真；
抽签。单张（e）；
};
draw.stop=函数（e）{
向下=假；
};
函数lightIntermediateSquares（startX、startY、endX、endY）{
对于（var pct=0；pct以下是如何照亮缺失的方块


计算上一个鼠标移动位置和当前鼠标移动位置之间的直线

然后使用插值走那条线，并为线穿过的任何网格正方形着色

        // walk along a line from the last mousemove position
        // to the current mousemove position.
        // Then color any cells we pass over on our walk
        for(var pct=0;pct<=1;pct+=0.06){
              var dx = mouseX-lastX;
              var dy = mouseY-lastY;
              var X = parseInt(lastX + dx*pct);
              var Y = parseInt(lastY + dy*pct);
              if( !(X==lastForX && Y==lastForY) ){ 
                  draw.ColorCell(X,Y); 
              }

//从最后一个鼠标移动位置沿直线行走
//移动到当前鼠标移动位置。
//然后给我们走路经过的细胞涂上颜色
对于（var pct=0；pctohh）写这部分花了我两个多小时！请帮我一点：/（我改变了很多，我只需要修正一件事）。我不知道为什么它没有连接到当前光标位置。它像磁铁一样工作，当你将光标移到停止位置附近时，它会捕捉到光标。你能看一下我拿了你的代码并整合了在最后一个鼠标移动和当前鼠标移动之间为所有网格单元格着色的想法吗。请看我编辑的答案。完美。外观就像我需要开始在JavaScript中学习jQuery一样。谢谢。既然没有私人消息，我能问一下jQuery是否比纯JS对web应用程序更有效吗？是的！尽管它真的是“公正”的JavaScript，但jQuery（JQ）是非常出色的代码，并且利用了它的卓越。John Resig（创建者）而且所有其他作者都在不断跟上新JS选项和效率的步伐。此外，JQ消除了跨浏览器问题，因此编写脚本就变成了创建有用的应用程序，而不是追逐跨浏览器差异。如果您使用CDN，那么JQ可能已经缓存在用户计算机上。如果我只能使用1个附加组件脚本，jQuery绝对是那个！
var canvas = document.getElementById('plan');
var context = canvas.getContext('2d'),
    wt = canvas.width,
    ht = canvas.height;
var down = false;
var draw = function (e) {};

window.onload = grid();

var oldPos = {
    mX: 0,
    mY: 0
};

var dPos = {
    mX: 0,
    mY: 0
};

var curPos = {
    mX: 0,
    mY: 0
};

draw.to = function (X, Y) {
    oldPos = getMousePos(canvas, e); //update position
    var mposX = X,
        mposY = Y;
    mposX = mposX - mposX % 5;
    mposY = mposY - mposY % 5;
    context.fillStyle = "red";
    context.fillRect(mposX + 0.5, mposY + 0.5, 5, 5);
};

draw.single = function (e) {
    oldPos = getMousePos(canvas, e);
    var mpos = getMousePos(canvas, e);
    mpos.mX = mpos.mX - mpos.mX % 5;
    mpos.mY = mpos.mY - mpos.mY % 5;
    context.fillStyle = "red";
    context.fillRect(mpos.mX + 0.5, mpos.mY + 0.5, 5, 5);
};

draw.move = function (e) {
    if (down) {
        curPos = getMousePos(canvas, e);
        dPos.mX = Math.abs(curPos.mX - oldPos.mX); // distance between old & new (delta X)
        dPos.mY = Math.abs(curPos.mY - oldPos.mY); // delta Y
        if (dPos.mX >= 5 || dPos.mY >= 5) { // if the distance is bigger than 5px hz OR 5px vertical
            lightIntermediateSquares(oldPos.mX, oldPos.mY, curPos.mX, curPos.mY); // ^ connect them
        } else {
            draw.single(e); // simple
        }
    }
};

draw.start = function (e) {
    e.preventDefault();
    down = true;
    draw.single(e);
};

draw.stop = function (e) {
    down = false;
};

function lightIntermediateSquares(startX, startY, endX, endY) {
    for (var pct = 0; pct <= 1; pct += 0.03) {
        var dx = endX - startX;
        var dy = endY - startY;
        var X = startX + dx * pct;
        var Y = startY + dy * pct;
        draw.to(X, Y); // is it okay?
    }
}

function grid() {
    context.strokeStyle = "#f0f0f0";
    var h = 2.5,
        p = 2.5;
    context.strokeRect(0.5, 0.5, 5, 5);
    for (i = 0; i < wt; i += p) {
        p *= 2;
        context.drawImage(canvas, p, 0);
    }
    for (i = 0; i < ht; i += h) {
        h *= 2;
        context.drawImage(canvas, 0, h);
    }
}

function getMousePos(canvas, e) {
    var rect = canvas.getBoundingClientRect();
    return {
        mX: e.clientX - rect.left - 1,
        mY: e.clientY - rect.top - 1
    };
}

canvas.addEventListener('mouseup', draw.stop, false);
canvas.addEventListener('mousedown', draw.start, false);
canvas.addEventListener('mousemove', draw.move, false);
canvas.addEventListener('mouseout', draw.stop, false);

        // walk along a line from the last mousemove position
        // to the current mousemove position.
        // Then color any cells we pass over on our walk
        for(var pct=0;pct<=1;pct+=0.06){
              var dx = mouseX-lastX;
              var dy = mouseY-lastY;
              var X = parseInt(lastX + dx*pct);
              var Y = parseInt(lastY + dy*pct);
              if( !(X==lastForX && Y==lastForY) ){ 
                  draw.ColorCell(X,Y); 
              }

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;


    var wt = canvas.width;
    var ht = canvas.height;
    var down = false;

    var lastX=-20;
    var lastY=-20;

    var points=[];

    var draw = function (e) {};


    draw.started = false;

    var count;


    function interpolateLine(startX,startY,endX,endY){

        var lastForX;
        var lastForY;
        //
        for(var pct=0;pct<=1;pct+=0.06){
              var dx = endX-startX;
              var dy = endY-startY;
              var X = startX + dx*pct;
              var Y = startY + dy*pct;
              if( !(X==lastForX && Y==lastForY) ){ 
                  draw.ColorCell(X,Y); 
              }
              lastForX=X;
              lastForY=Y;
        }

    }


    draw.ColorCell=function(x,y){
        var rw = x - 1;
        var rh = y - 1;
        rw = rw - rw % 5 + 0.5;
        rh = rh - rh % 5 + 0.5;
        context.fillStyle = "red";
        context.fillRect( rw, rh, 5, 5);
    };


    draw.single = function (e) {
        var mouseX=parseInt(e.clientX-offsetX);
        var mouseY=parseInt(e.clientY-offsetY);
        draw.ColorCell(mouseX,mouseY);
    };


    // mousemove
    draw.move = function (e) {

        if(!down){return;}

        // get the current mouse position
        var mouseX=parseInt(e.clientX-offsetX);
        var mouseY=parseInt(e.clientY-offsetY);

        // if we haven't moved off this XY, then don't bother processing further
        if(mouseX==lastX && mouseY==lastY){return;}

        // When running the for-loop below,
        // many iterations will not find a new grid-cell
        // so lastForX/lastForY will let us skip duplicate XY
        var lastForX=lastX;
        var lastForY=lastY;

        // walk along a line from the last mousemove position
        // to the current mousemove position.
        // Then color any cells we pass over on our walk
        for(var pct=0;pct<=1;pct+=0.06){
              var dx = mouseX-lastX;
              var dy = mouseY-lastY;
              var X = parseInt(lastX + dx*pct);
              var Y = parseInt(lastY + dy*pct);
              if( !(X==lastForX && Y==lastForY) ){ 
                  draw.ColorCell(X,Y); 
              }
              lastForX=X;
              lastForY=Y;
        }

        // set this mouse position as starting position for next mousemove
        lastX=mouseX;
        lastY=mouseY;    
    };


    // mousedown
    draw.start = function (e) {
        e.preventDefault();
        lastX=parseInt(e.clientX-offsetX);
        lastY=parseInt(e.clientY-offsetY);
        down = true;
    };


    // mouseup
    draw.stop = function (e) {
        e.preventDefault();
        down = false;
    };


    function grid() {
        context.strokeStyle = "#f0f0f0";
        var h = 2.5;
        var p = 2.5;
        context.strokeRect(0.5, 0.5, 5, 5);
        for (i = 0; i < wt; i += p) {
            p *= 2;
            context.drawImage(canvas, p, 0);
        }
        for (i = 0; i < ht; i += h) {
            h *= 2;
            context.drawImage(canvas, 0, h);
        }
    }


    canvas.addEventListener('mouseup', draw.stop, false);
    canvas.addEventListener('mouseout', draw.stop, false);
    canvas.addEventListener('mousedown', draw.start, false);
    canvas.addEventListener('click', draw.single, false);
    canvas.addEventListener('mousemove', draw.move, false);

    grid();

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=501 height=301></canvas>
</body>
</html>