画布-如何在新的“路线”上单击以画线并更改颜色

时间：2018-12-02 21:01:03

标签： javascript canvas

我有一个画布（请参见下面的照片），并且我试图在用户单击画布内部时所画的圆圈之间的线条一直停留了一段时间。

从照片中的示例可以看出，这也是我希望在画布中拥有的内容：

用户单击“蓝色”-从第一个点开始蓝色（x），继续在网格内的画布内部单击，从而添加更多蓝色（x），并在它们之间带有蓝色线条。 （我也不知道如何绘制X而不是当前使用的圆）

用户单击红色-开始第一个点红色（o），继续在画布上沿网格单击内部，添加更多红色（o's），并且它们之间有红线。

用户单击“ Sterge”-画布清除，网格保留。

[see canvas here] 到目前为止，我的代码：

var needFirstPoint = true;
var lineTo = [{}];

function drawNextLine(ctx, x, y) {
    if (needFirstPoint) {
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(x, y);
        needFirstPoint = false;

    }
    else {
        ctx.beginPath();
        ctx.lineTo(x, y);
        ctx.stroke();
    }
}

   $(document).ready(function () {
    var canvas = $('#myCanvas').get(0);
    if (!canvas.getContext) { return; }
    var ctx = canvas.getContext('2d');

    var drawGrid = function (w, h, id) {
        ctx.canvas.width = w;
        ctx.canvas.height = h;
        ctx.lineWidth = .1;

        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();

    };

    drawGrid(450, 280, "myCanvas");

    var drawChart = function () {
        ctx.arc(lineTo[lineTo.length - 1].x, lineTo[lineTo.length - 1].y, 6, 0, Math.PI * 2, false)
        ctx.stroke();
    }

    drawChart();

    document.getElementById('move').addEventListener('click', function () {

        $('#myCanvas').on('click', function (e) {

            var offset = $(this).offset();
            var x = e.pageX - offset.left;
            var y = e.pageY - offset.top;
            ctx.strokeStyle = "red";
            drawNextLine(ctx, x, y);

            lineTo.push({ x: x, y: y });
            drawChart();

        });
    });

    document.getElementById('move1').addEventListener('click', function () {

        $('#myCanvas').on('click', function (e) {

            var offset = $(this).offset();
            var x = e.pageX - offset.left;
            var y = e.pageY - offset.top;
            ctx.strokeStyle = "blue";
            drawNextLine1(ctx, x, y);

            lineTo.push({ x: x, y: y });
            drawChart();

        });
    });

});

谢谢。

1 个答案:

答案 0 :(得分：2)

Ì已简化了代码。我希望你不要介意。接下来是我的代码。我希望这就是你想要的。

var lineTo = [];

$(document).ready(function() {
  var canvas = $("#myCanvas").get(0);
  if (!canvas.getContext) {
    return;
  }
  var ctx = canvas.getContext("2d");

  var drawGrid = function(w, h, id) {
    ctx.canvas.width = w;
    ctx.canvas.height = h;
    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();
  };

  drawGrid(450, 280, "myCanvas");
  
  

  ctx.lineWidth = 1;
  
  

  var drawChart = function(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, 6, 0, Math.PI * 2);
    ctx.strokeStyle = "red";
    ctx.stroke();
  };

  $("#myCanvas").on("click", function(e) {
    var offset = $(this).offset();
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;

    drawChart(x, y);

    if (lineTo.length > 0) {
      var last = lineTo[lineTo.length - 1];
      ctx.beginPath();
      ctx.moveTo(last.x, last.y);
      ctx.lineTo(x, y);
      ctx.strokeStyle = "blue";
      ctx.stroke();
    }

    lineTo.push({ x: x, y: y });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="myCanvas"></canas>

更新

OP正在评论：

  

我需要有2个按钮：向左和向右。当我单击“左”时，“右”路径停止，“左”路径从一个独立点开始。

我不是很了解。这是我的理解：

我了解您需要一个按钮来删除最后一个点sterge。

您还需要按钮dreapta才能开始新的路径。

这是我的代码。请阅读评论。

//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");

drawGrid();



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 });
  // 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 => {
  //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
      drawCircle(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();
      }
    }
  }
}

function drawCircle(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, 6, 0, Math.PI * 2);
  ctx.strokeStyle = "red";
  ctx.stroke();
}
<canvas id="myCanvas"></canvas>
<p><input type="button" value="dreapta" id="dreapta" /> 
<input type="button" value="sterge" id="sterge" />
</p>

相关问题
最新问题