左按钮-用X推蓝线
向右按钮-用O推红线
按钮删除-删除数组中的最后一行
因此，当我单击“左”时，带有X的蓝线被推入数组。
问题是...如果我单击“右”并开始添加红线，则已经在画布上绘制的蓝线也会以O变为红线。
如何将2个按钮彼此分开？
谢谢。
function drawGrid() {
ctx.strokeStyle = "black";
ctx.lineWidth = 0.1;
ctx.beginPath();
for (x = 15; x <= w; x += 60) {
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
for (y = 20; y <= h; y += 20) {
ctx.moveTo(0, y);
ctx.lineTo(w, y);
}
}
ctx.stroke();
}
var ry = [[]];
var canvas = document.querySelector("#myCanvas");
var w = (canvas.width = 450);
var h = (canvas.height = 280);
var ctx = canvas.getContext("2d");
drawGrid();
//右键
document.getElementById('right').onclick = function () {
ry.push([]);
myCanvas.addEventListener("click", e => {
var offset = canvas.getBoundingClientRect();
var x = e.clientX - offset.left;
var y = e.clientY - offset.top;
ry[ry.length - 1].push({ x: x, y: y });
ctx.clearRect(0, 0, w, h);
drawGrid();
drawChart();
});
deletes.addEventListener("click", e => {
if (ry[ry.length - 1].length > 0) {
ry[ry.length - 1].pop();
} else {
ry.pop();
ry[ry.length - 1].pop();
}
ctx.clearRect(0, 0, w, h);
drawGrid();
drawChart();
});
function drawGrid() {
ctx.strokeStyle = "black";
ctx.lineWidth = 0.1;
ctx.beginPath();
for (x = 15; x <= w; x += 60) {
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
for (y = 20; y <= h; y += 20) {
ctx.moveTo(0, y);
ctx.lineTo(w, y);
}
}
ctx.stroke();
}
function drawChart() {
ctx.lineWidth = 1;
for (let index = 0; index < ry.length; index++) {
for (let i = 0; i < ry[index].length; i++) {
let l = ry[index][i];
drawCircle(l.x, l.y);
if (i > 0) {
let last = ry[index][i - 1];
ctx.beginPath();
ctx.moveTo(last.x, last.y);
ctx.lineTo(l.x, l.y);
ctx.strokeStyle = "red";
ctx.stroke();
}
}
}
}
function drawCircle(x, y) {
ctx.beginPath();
ctx.arc(x, y, 6, 0, Math.PI * 2);
ctx.strokeStyle = "red";
ctx.stroke();
}
};
//左键
document.getElementById('left').onclick = function () {
ry.push([]);
myCanvas.addEventListener("click", e => {
var offset = canvas.getBoundingClientRect();
var x = e.clientX - offset.left;
var y = e.clientY - offset.top;
ry[ry.length - 1].push({ x: x, y: y });
ctx.clearRect(0, 0, w, h);
drawGrid();
drawChart();
});
function drawGrid() {
ctx.strokeStyle = "black";
ctx.lineWidth = 0.1;
ctx.beginPath();
for (x = 15; x <= w; x += 60) {
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
for (y = 20; y <= h; y += 20) {
ctx.moveTo(0, y);
ctx.lineTo(w, y);
}
}
ctx.stroke();
}
function drawChart() {
ctx.lineWidth = 1;
for (let index = 0; index < ry.length; index++) {
for (let i = 0; i < ry[index].length; i++) {
let l = ry[index][i];
drawCross(l.x, l.y);
if (i > 0) {
let last = ry[index][i - 1];
ctx.beginPath();
ctx.moveTo(last.x, last.y);
ctx.lineTo(l.x, l.y);
ctx.strokeStyle = "blue";
ctx.stroke();
}
}
}
}
function drawCross(x, y) {
ctx.beginPath();
ctx.moveTo(x - 6, y - 6);
ctx.lineTo(x + 6, y + 6);
ctx.moveTo(x + 6, y - 6);
ctx.lineTo(x - 6, y + 6);
ctx.strokeStyle = "blue";
ctx.stroke();
}
};
最佳答案
要知道的一件好事是，您可以将函数作为窗口方法来调用。例如，如果您有function test()，则可以将此函数称为window["test"]()
在函数drawChart()中，可以调用drawCircle()或drawCross()
当我将点推入点数组时，除了x和y之外，我还添加了一个f（用于函数）。 f的值是一个带有函数名称的字符串：drawCircle或drawCross
在函数drawChart中，您会找到以下代码行：window[l.f](l.x, l.y)根据drawCircle()的值（函数名）调用drawCross()或l.f。
函数的名称是在代码开头声明的全局变量，并设置为drawCircle：let theFunction = "drawCircle";
当您单击向右或向左按钮时，您可以更改theFunction的值。
//this is an array of arrays
//when I click on the canvas a new point is pushed on the last array of this array
var ry = [[]];
var canvas = document.querySelector("#myCanvas");
let w = (canvas.width = 450);
let h = (canvas.height = 280);
var ctx = canvas.getContext("2d");
let theFunction = "drawCircle";
drawGrid();
function drawCircle(x, y) {
ctx.beginPath();
ctx.arc(x, y, 6, 0, Math.PI * 2);
ctx.strokeStyle = "red";
ctx.stroke();
}
function drawCross(x, y) {
ctx.beginPath();
ctx.moveTo(x - 6, y - 6);
ctx.lineTo(x + 6, y + 6);
ctx.moveTo(x + 6, y - 6);
ctx.lineTo(x - 6, y + 6);
ctx.strokeStyle = "blue";
ctx.stroke();
}
myCanvas.addEventListener("click", e => {
var offset = canvas.getBoundingClientRect();
var x = e.clientX - offset.left;
var y = e.clientY - offset.top;
//a new point is pushed on the last array of ry
ry[ry.length - 1].push({ x: x, y: y, f:theFunction });
// delete everything
ctx.clearRect(0, 0, w, h);
// draw everything
drawGrid();
drawChart();
});
sterge.addEventListener("click", e => {
//when sterge is clicked the last point from the last array is deleted
if (ry[ry.length - 1].length > 0) {
ry[ry.length - 1].pop();
} else {
//if the last array is empty I delete this array
ry.pop();
//and then I delete the last point from the last array
ry[ry.length - 1].pop();
}
// delete everything
ctx.clearRect(0, 0, w, h);
// draw everything
drawGrid();
drawChart();
});
dreapta.addEventListener("click", e => {
theFunction = "drawCircle"
//when dreapta is clicked, a new array is pushed into the ry
ry.push([]);
});
stanga.addEventListener("click", e => {
theFunction = "drawCross"
//when dreapta is clicked, a new array is pushed into the ry
ry.push([]);
});
function drawGrid() {
ctx.strokeStyle = "black";
ctx.lineWidth = 0.1;
ctx.beginPath();
for (x = 15; x <= w; x += 60) {
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
for (y = 20; y <= h; y += 20) {
ctx.moveTo(0, y);
ctx.lineTo(w, y);
}
}
ctx.stroke();
}
function drawChart() {
ctx.lineWidth = 1;
// for every array in the ry array
for (let index = 0; index < ry.length; index++) {
// for every point in the ry[index]
for (let i = 0; i < ry[index].length; i++) {
let l = ry[index][i];
// draw the circle or the cross
window[l.f](l.x, l.y)
// draw the line
if (i > 0) {
let last = ry[index][i - 1];
ctx.beginPath();
ctx.moveTo(last.x, last.y);
ctx.lineTo(l.x, l.y);
ctx.strokeStyle = "blue";
ctx.stroke();
}
}
}
}<canvas id="myCanvas"></canvas>
<p><input type="button" value="dreapta" id="dreapta" />
<input type="button" value="stanga" id="stanga" />
<input type="button" value="sterge" id="sterge" />
</p>