添加新行时，如何删除旧行

Question

我正在尝试使用javascript创建一个图，在那里我将能够通过y=mx+b显示方程。我有一些方法可以创建x和y轴，我有一个方法可以根据用户输入绘制线(单击绘制线按钮(。然而，每当我单击绘制线按钮时，我都无法弄清楚如何使前一条线消失。

Graph.prototype.drawLine = function(slope, yintercept, color, thickness) {
console.log("Inside drawline");
console.log("this.maxX: " + this.maxX + " this.maxY: " + this.maxY);
var context = this.context;
// draw x and y axis
this.drawXAxis();
this.drawYAxis();
//context.clearRect(0, 0, this.canvas.width, this.canvas.height);
context.save();
context.save();
this.transformContext();
console.log("this.minX: " + this.minX);
console.log("this.iteration: " + this.iteration);
console.log("yintercept: " + yintercept);
console.log("slope:" + slope);
context.beginPath();
context.moveTo(this.minX, slope * this.minX + yintercept);
for(var x = this.minX + this.iteration; x <= this.maxX; x += this.iteration) {
if (this.iteration % 200 == 0){
console.log("x: " + x + " y: " + (slope * x + yintercept));
}
context.lineTo(x, slope * x + yintercept);
}
context.restore();
context.lineJoin = 'round';
context.lineWidth = thickness;
context.strokeStyle = color;
context.stroke();
context.restore();
};

这是我的jQuery:

$("#btnGraph").click(function(){

// myGraph.clearCanvas()
var m1,b1,m2,b2 = 0;
m1 = parseFloat($("#m1").val());
b1 = parseFloat($("#b1").val());

var myGraph = new Graph({
canvasId: 'Graph',
minX: -10,
minY: -10,
maxX: 10,
maxY: 10,
unitsPerTick: 1
});      

myGraph.drawLine(m1, b1, 'blue', 3);

//myGraph.drawEquation(function(x) {
//return 1 * x;
//}, 'red', 3);
});

Answer 1

每次都需要重新绘制画布。

当你在画布上画东西时，它不是一个可以稍后调整的对象。a"；行"；你在画布上绘制的调整画布像素的颜色。一旦画好了，这条线就不会作为一个不同的对象存在于画布中，所以你不能"撤消"；