Html5 canvas 无法切换回画笔工具在画布上绘制

所以我有我的刷子和橡皮擦工具。我遇到的问题是，起初我可以在画布上绘制草图，但在我切换到橡皮擦后，如果我再次选择画笔，它将停留在橡皮擦工具上。我尝试使用if-else，但无法使其工作

tool = new brushTool();
$('#brushTool').click(brushTool);
function brushTool() {
    var tool = this;
    this.mouseStart = false;

$('#eraserTool').click(eraserTool);
function eraserTool() {
    context.globalCompositeOperation = "destination-out";
    context.strokeStyle = "rgba(0,0,0,1)";
}


    this.mousedown = function (e) {
        tool.mouseStart = true;
        context.beginPath();
        context.moveTo(x, y);
        context.lineTo(x,y);
        context.lineCap = 'round';
        context.lineWidth = document.getElementById('brush_size').value;
        context.strokeStyle = document.getElementById('color').value;
        context.stroke();
    };


    this.mousemove = function (e) {
      if (tool.mouseStart) {
        context.lineTo(x, y);
        context.stroke();
      }
    };

    this.mouseup = function (e) {
      if (tool.mouseStart) {
        tool.mousemove(e);
        tool.mouseStart = false;
      }
    };
  }

---

感谢您使用javascript“类”

下面是如何创建工具类

看起来您希望该工具可以作为画笔或橡皮擦使用，因此您的工具类需要一个“type”变量来了解其当前模式（画笔/橡皮擦）

下面介绍如何将功能添加到工具类（通常称为方法，但实际上它们是javascript函数）

您可以使用prototype在“function Tool（）”定义之外声明类方法。这样，每个工具对象就不会被自己的方法副本所拖累。如果您创建10个工具，它们都将能够使用您在原型上定义的常用方法

    // this is where you define what you want the tool to do now (brush/eraser)
    Tool.prototype.activate=function(newType){ … };

    // start a new line (called by tool.mousedown)
    Tool.prototype.startLine=function(){ … };

    // draw a new line segment (called by tool.mousemove)
    Tool.prototype.drawLineTo=function(){ … }

    // called by jQuery when the user presses down the mousebutton
    Tool.prototype.mousedown=function(e){ … }

    // called by jQuery when the user moves the mouse
    Tool.prototype.mouseup=function(e){ … }

此时，您的工具类只是一个蓝图。要创建实际工具，请使用“新建”。此实际工具称为对象

    var myTool=new Tool();

然后您可以使用myTool上的任何方法（函数）

    // call the “activate” method/function on your new myTool object.
    myTool.activate("brush");

下面是代码和小提琴：

正文{背景色：象牙；}
画布{边框：1px纯红；}
#画笔大小，颜色{宽度：30px；}
$（函数（）{
//注：每个“this”都指工具
//制作一个通用工具，可以作为画笔或橡皮擦使用
//首先，设置工具具有的属性
函数工具（）{
var type=“无”；
var mouseStart=false；
var x；
变量y；
var lastX；
血管成形术；
}
//其次，添加您的工具所使用的方法（函数）
//这些方法实际上起到了作用
//tool.activate（）
Tool.prototype.activate=函数（newType）{
this.type=newType；
this.mouseStart=false；
//在此处设置笔刷属性
if（this.type==“画笔”）{
context.globalCompositeOperation=“源代码结束”；
}
//在此处设置橡皮擦属性
if（this.type==“橡皮擦”）{
context.globalCompositeOperation=“目标输出”；
context.strokeStyle=“rgba（0,0,0,1）”；
}
log（this.type+“：”+context.globalCompositeOperation）；
}
//tool.startine（）
Tool.prototype.startine=function（）{
this.lastX=this.x；
this.lastY=this.y；
context.lineCap='round'；
context.lineWidth=document.getElementById（“笔刷大小”）.value；
if（this.type==“画笔”）{
context.strokeStyle=document.getElementById（'color'）.value；
}
console.log（context.strokeStyle）；
}
//tool.drawLineTo（）
Tool.prototype.drawLineTo=函数（）{
context.beginPath（）；
context.moveTo（this.lastX，this.lastY）；
context.lineTo（this.x，this.y）；
stroke（）；
this.lastX=this.x；
this.lastY=this.y；
//log（this.x+“/”+this.y+”：“+this.mouseStart）；
}
//工具。鼠标向下（e）
Tool.prototype.mousedown=函数（e）{
这是setXY（e）；
this.mouseStart=true；
this.startine（this.x，this.y）；
}
//工具。鼠标移动（e）
Tool.prototype.mousemove=函数（e）{
if（this.mouseStart）{
这是setXY（e）；
this.drawLineTo（this.x，this.y）；
}
}
//工具鼠标（e）
Tool.prototype.mouseup=函数（e）{
if（this.mouseStart）{
这是setXY（e）；
这条吊绳；
this.mouseStart=false；
}
}
//工具设置XY（e）
Tool.prototype.setXY=函数（e）{
this.x=parseInt（e.clientX-offsetX）；
this.y=parseInt（e.clientY-offsetY）；
}
//获取对画布及其上下文的引用
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
//获取画布在页面上的位置
//（以后需要计算鼠标位置）
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
//制作新工具
var myTool=新工具（）；
myTool.activate（“画笔”）；
//设置一些默认值
document.getElementById（“画笔大小”）。值=15；
document.getElementById（'color'）.value=“绿色”；
//倾听事件
$（“#canvas”）.mousedown（函数（e）{myTool.mousedown（e）；}）；
$（“#canvas”）.mousemove（函数（e）{myTool.mousemove（e）；}）；
$（“#canvas”）.mouseup（函数（e）{myTool.mouseup（e）；}）；
$（“#橡皮擦工具”）。单击（函数（e）{myTool.activate（“橡皮擦”）；}）；
$（#brushTool'）。单击（函数（e）{myTool.activate（“brush”）；}）；
}); // end$（函数（）{}）；
刷子
橡皮擦

感谢您的详细解释和帮助！帮了我很多忙！我只是想知道，有没有可能在不使用原型的情况下在function Tool（）之外声明类方法？嗯……向类原型中添加是一种方式……您为什么不想这样做？您可以向新创建的工具对象添加方法，如下所示：var t=new tool（）；t、 addedFn=function（）{alert（“new”）；}；t、 addedFn（）；[运行正常！]。但是如果你想在你的工具类上创建变体——比如说一个画笔是渐变色而不是纯色的工具类，那么你应该检查javascript类“继承”，没有理由。我只是比较有原型和没有原型的区别，因为我对原型的用法有点模糊。赞成。我曾想给画笔添加渐变，但还没想好如何添加渐变。所以，谢谢你的先发制人。很抱歉我的回答迟了。我是新来的。所以，我只是习惯了事情的运作方式。无论如何，很抱歉，由于我的声誉，我不能把它当作有用的东西。这里没有问题：）欢迎来到stackoverflow！

    // call the “activate” method/function on your new myTool object.
    myTool.activate("brush");

<!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;}
    #brush_size,#color{ width:30px;}
</style>

<script>
$(function(){

    // Note: every "this" refers to the tool

    // make a generic tool that can work as either a brush or eraser

    // first, set the properties that your tool has
    function Tool(){
        var type="none";
        var mouseStart=false;
        var x;
        var y;
        var lastX;
        var lastY;
    }

    // second, add the methods (functions) that your tool
    // these methods actually do the work

    // tool.activate()
    Tool.prototype.activate=function(newType){

        this.type=newType;
        this.mouseStart=false;

        // set your brush properties here
        if(this.type=="brush"){
          context.globalCompositeOperation = "source-over";
        }

        // set your eraser properties here
        if(this.type=="eraser"){
          context.globalCompositeOperation = "destination-out";
          context.strokeStyle = "rgba(0,0,0,1)";
        }

        console.log(this.type+": "+context.globalCompositeOperation);
    }

    //tool.startLine()
    Tool.prototype.startLine=function(){
        this.lastX=this.x;
        this.lastY=this.y;
        context.lineCap = 'round';
        context.lineWidth = document.getElementById("brush_size").value;
        if(this.type=="brush"){
            context.strokeStyle = document.getElementById('color').value;
        }
    console.log(context.strokeStyle);
    }

    // tool.drawLineTo()
    Tool.prototype.drawLineTo=function(){
        context.beginPath();
        context.moveTo(this.lastX,this.lastY);
        context.lineTo(this.x,this.y);
        context.stroke();     
        this.lastX=this.x;
        this.lastY=this.y;
    //console.log(this.x+"/"+this.y+": "+this.mouseStart);
    }

    // tool.mousedown(e)
    Tool.prototype.mousedown=function(e){
        this.setXY(e);
        this.mouseStart = true;
        this.startLine(this.x,this.y);
    }

    // tool.mousemove(e)
    Tool.prototype.mousemove=function(e){
        if (this.mouseStart) {
          this.setXY(e);
          this.drawLineTo(this.x,this.y);
        }
    }

    // tool.mouseup(e)
    Tool.prototype.mouseup=function(e){
        if (this.mouseStart) {
          this.setXY(e);
          this.drawLine;
          this.mouseStart = false;
        }
    }

    // tool.setXY(e)
    Tool.prototype.setXY=function(e){
        this.x=parseInt(e.clientX-offsetX);
        this.y=parseInt(e.clientY-offsetY);
    }


    // get references to the canvas and it's context
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");

    // get the position of the canvas on the page
    // (needed to calculate mouse position later)
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    // make a new tool
    var myTool=new Tool();
    myTool.activate("brush");

    // set some defaults
    document.getElementById("brush_size").value=15;
    document.getElementById('color').value="green";


    // listen for events

    $("#canvas").mousedown(function(e){myTool.mousedown(e);});
    $("#canvas").mousemove(function(e){myTool.mousemove(e);});
    $("#canvas").mouseup(function(e){myTool.mouseup(e);});

    $('#eraserTool').click(function(e){ myTool.activate("eraser"); });
    $('#brushTool').click(function(e){ myTool.activate("brush"); });



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

</head>

<body>
    <button id="brushTool">Brush</button>
    <button id="eraserTool">Eraser</button>
    <input id="brush_size" type="text" width=10>
    <input id="color" type="text" width=10><br/>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>