Javascript 画到画布就像画画一样

我有三个妻子：

 clickX = [],
    clickY = [],
    clickDrag = [];

以下是单击“向下”时发生的情况：

$('#canvasCursor').mousedown(function (e) {
    console.log('down');
    mouseX = e.pageX - this.offsetLeft;
    mouseY = e.pageY - this.offsetTop;
    paint = true;
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
    redraw();
});

在这里，它将单击添加到阵列并绘制：

函数重画（）{ ctx.clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；//清除画布

    ctx.strokeStyle = "green";
    ctx.lineJoin = "round";
    ctx.lineWidth = brushSize*2;

    for (var i = 0; i < clickX.length; i++) {
        ctx.beginPath();
        if (clickDrag[i] && i) {
            ctx.moveTo(clickX[i - 1], clickY[i - 1]);
        } else {
            ctx.moveTo(clickX[i] - 1, clickY[i]);
        }
        ctx.lineTo(clickX[i], clickY[i]);
        ctx.closePath();
        ctx.stroke();
    }
}

ctx.strokeStyle=“绿色”；
ctx.lineJoin=“圆形”；
ctx.lineWidth=画笔大小*2；
对于（变量i=0；i

我现在尝试摆脱数组方式，因为当我使用滑块动态更改var brushSize时，它会以新的大小重新绘制整个图片，而不是当时的大小。我不知道如何保存数组中任何特定对象的大小，然后将它们分开绘制

我不介意如果我不能实现撤销功能，这种方式给了我，只要我可以修复笔刷大小的变化。在这里你可以看到我在胡说什么

---

-而且它看起来比较慢，我猜是因为它是从一个数组中绘制的 编辑2：然后重试。这有点难测试

没有理由每次都重新绘制每个点。您可以修改侦听器以执行以下操作：

var prevMouseX=null,prevMouseY=null;
$('#canvasCursor').mousedown(function (e) {
    paint = true;

    console.log('down');
    //get current mouse coords
    mouseX = e.pageX - this.offsetLeft;
    mouseY = e.pageY - this.offsetTop;

    if (prevMouseX==null) {
        //store these coordinates for next time if they haven't been defined yet
        prevMouseX = mouseX;
        prevMouseY = mouseY;
    }
});

$('#canvasCursor').mousemove(function (e) {
    //get current mouse coords
    mouseX = e.pageX - this.offsetLeft;
    mouseY = e.pageY - this.offsetTop;

    if (prevMouseX==null) {
        //store these coordinates for next time if they haven't been defined yet
        prevMouseX = mouseX;
        prevMouseY = mouseY;
    }

    if (paint) {drawline(mouseX,mouseY,prevMouseX,prevMouseY);}

    //store these coordinates for next time
    prevMouseX = mouseX;
    prevMouseY = mouseY;
});

其中，功能绘制线定义为：

function drawline(x1,y1,x2,y2) {
ctx.strokeStyle = "green";
    ctx.lineJoin = "round";
    ctx.lineWidth = brushSize*2;

    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.closePath();
    ctx.stroke();
}

---

不要将绘画存储到阵列中
它会减慢绘图速度。只需在不清除画布的情况下绘制最新线条。这样，线宽的更改不会影响到之前的图形。所以删除

ctx.clearRect（0，0，ctx.canvas.width，ctx.canvas.height）和
用于
循环。您可能还希望仅在发生更改时更改上下文样式（线宽等），而不是每次运行
redraw（）
函数时

撤销支持

为每个鼠标按下会话制作不同的画布，并将它们绘制在一起，您可以轻松地创建撤消功能。通过按“撤消”，它只需将最新画布从画布阵列中拼接出来。通过谷歌了解更多有关绘制临时画布的信息。
以下是如何使用画布像绘制一样绘制

如果需要撤消功能，最好的选择是记录用户绘制的所有线段

这是通过包含用户绘制的所有点（多段线）的点阵列完成的

要跟踪笔刷大小和笔刷颜色，还需要在阵列中包含此信息

所以数组的每个元素都有关于每个线段的信息：


x：该线段的结束x坐标
y：结束y坐标
大小：笔刷大小（线宽）
颜色：笔刷颜色（笔划样式）
模式：“开始”表示新行的开始，“结束”表示此行的结束

它是如何工作的？

当用户拖动绘制线段时，每个mousemove事件都会使用
context.lineTo
和
context.stroke
扩展当前线段

当用户选择新的笔刷大小或笔刷颜色时，context.beginPath将启动
context.beginPath

当用户按住“撤消”按钮时，最后一条线段中的最后一个点将从点阵列中弹出。然后重新绘制所有幸存的线段。按下“撤消”按钮时，每十分之一秒触发一次

下面是代码和小提琴：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var lastX；
血管成形术；
var mouseX；
var mouseY；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var isMouseDown=错误；
var-brushSize=20；
var brushColor=“#ff0000”；
var点=[]；
功能手柄向下（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//把你的鼠标下的东西放在这里
ctx.beginPath（）；
如果（ctx.lineWidth！=brushSize）{ctx.lineWidth=brushSize；}
如果（ctx.strokeStyle！=brushColor）{ctx.strokeStyle=brushColor；}
ctx.moveTo（mouseX，mouseY）；
push（{x:mouseX，y:mouseY，size:brushSize，color:brushColor，mode:“begin”}）；
lastX=鼠标；
拉蒂=老鼠；
isMouseDown=真；
}
功能handleMouseUp（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//把你的鼠标放在这里
isMouseDown=错误；
push（{x:mouseX，y:mouseY，大小：brushSize，颜色：brushColor，模式：“end”}）；
}
功能手柄移动（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//把你的mousemove放在这里
如果（isMouseDown）{
ctx.lineTo（mouseX，mouseY）；
ctx.stroke（）；
lastX=鼠标；
拉蒂=老鼠；
//命令模式材料
push（{x:mouseX，y:mouseY，大小：brushSize，颜色：brushColor，模式：“draw”}）；
}
}
函数重画（）{
如果（points.length==0）{return；}
clearRect（0,0，canvas.width，canvas.height）；
对于（var i=0；i
<!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>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->

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

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var lastX;
    var lastY;
    var mouseX;
    var mouseY;
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var isMouseDown=false;
    var brushSize=20;
    var brushColor="#ff0000";
    var points=[];


    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      ctx.beginPath();
      if(ctx.lineWidth!=brushSize){ctx.lineWidth=brushSize;}
      if(ctx.strokeStyle!=brushColor){ctx.strokeStyle=brushColor;}
      ctx.moveTo(mouseX,mouseY);
      points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"begin"});
      lastX=mouseX;
      lastY=mouseY;
      isMouseDown=true;
    }

    function handleMouseUp(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mouseup stuff here
      isMouseDown=false;
      points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"end"});
    }


    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      if(isMouseDown){
          ctx.lineTo(mouseX,mouseY);
          ctx.stroke();     
          lastX=mouseX;
          lastY=mouseY;
          // command pattern stuff
          points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"draw"});
      }
    }


    function redrawAll(){

        if(points.length==0){return;}

        ctx.clearRect(0,0,canvas.width,canvas.height);

        for(var i=0;i<points.length;i++){

          var pt=points[i];

          var begin=false;

          if(ctx.lineWidth!=pt.size){
              ctx.lineWidth=pt.size;
              begin=true;
          }
          if(ctx.strokeStyle!=pt.color){
              ctx.strokeStyle=pt.color;
              begin=true;
          }
          if(pt.mode=="begin" || begin){
              ctx.beginPath();
              ctx.moveTo(pt.x,pt.y);
          }
          ctx.lineTo(pt.x,pt.y);
          if(pt.mode=="end" || (i==points.length-1)){
              ctx.stroke();
          }
        }
        ctx.stroke();
    }

    function undoLast(){
        points.pop();
        redrawAll();
    }

    ctx.lineJoin = "round";
    ctx.fillStyle=brushColor;
    ctx.lineWidth=brushSize;

    $("#brush5").click(function(){ brushSize=5; });
    $("#brush10").click(function(){ brushSize=10; });
    // Important!  Brush colors must be defined in 6-digit hex format only
    $("#brushRed").click(function(){ brushColor="#ff0000"; });
    $("#brushBlue").click(function(){ brushColor="#0000ff"; });

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});

    // hold down the undo button to erase the last line segment
    var interval;
    $("#undo").mousedown(function() {
      interval = setInterval(undoLast, 100);
    }).mouseup(function() {
      clearInterval(interval);
    });


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

</head>

<body>
    <p>Drag to draw. Use buttons to change lineWidth/color</p>
    <canvas id="canvas" width=300 height=300></canvas><br>
    <button id="undo">Hold this button down to Undo</button><br><br>
    <button id="brush5">5px Brush</button>
    <button id="brush10">10px Brush</button>
    <button id="brushRed">Red Brush</button>
    <button id="brushBlue">Blue Brush</button>
</body>
</html>