所以我有我的画笔和橡皮擦工具。我遇到的问题是我最初可以在画布上画画，但是在我切换到橡皮擦之后，如果我再次选择画笔，它会停留在橡皮擦工具上。我尝试使用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;
}
};
}
答案 0 :(得分：0)
您使用javascript“课程”的荣誉！
以下是制作工具类的方法。
看起来您希望工具可以用作画笔或橡皮擦，因此您的工具类需要一个“类型”变量才能知道它的当前模式（画笔/橡皮擦）
// create your Tool “class”
function Tool(){
// this is your tool’s current mode: none, brush, eraser
var type="none";
}
以下是如何为Tool类添加功能（通常称为方法 - 但它们实际上是javascript函数）。
您可以使用原型声明类方法 “函数工具（）”定义。这样，每个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){ … }
此时，您的工具类只是一个蓝图。要创建实际工具，请使用“new”。这个实际工具称为对象。
var myTool=new Tool();
然后你可以使用myTool上的任何方法（函数）
// call the “activate” method/function on your new myTool object.
myTool.activate("brush");
这是代码和小提琴：http://jsfiddle.net/m1erickson/sTAve/
<!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>