Question

如何点击圆圈开始绘制一条直线，当你点击第二个点停止画线？在我的例子中，绘制一条线会擦除整个画布。抱歉我的英文不好

   var canvas = document.getElementById('circle');
    var ctx = canvas.getContext( '2d' );
   canvas.width = 800;
   canvas.height = 600;

   var rect = can.getBoundingClientRect();


function dots1() {
ctx.beginPath();
ctx.arc(50 , 80, 4, 0, 2*Math.PI, true);
ctx.fillStyle ="#" +  Math.floor(Math.random()*0xFFFFFF).toString(16);
ctx.fill();
ctx.stroke();
 };

function dots2() {
ctx.beginPath();
ctx.arc(120 , 220, 4, 0, 2*Math.PI, true);
ctx.fillStyle ="#" +  Math.floor(Math.random()*0xFFFFFF).toString(16);
ctx.fill();
ctx.stroke();
 };

canvas.onmousemove = function () {
      c.clearRect(0,0,canvas.width,canvas.height);
      c.strokeStyle = 'blue';
      c.lineWidth = 1;
      c.beginPath();
      c.moveTo(letsdraw.x, letsdraw.y);
      c.lineTo(event.clientX - rect.left, event.clientY - rect.top);
      c.stroke();


   };
   canvas.onmousedown = function () {
       letsdraw = {
      x:event.clientX - rect.left,
      y:event.clientY - rect.top
      };

     };
canvas.onmouseup = function() {

  letsdraw = null;

 };

Answer 1

看起来像一个简单的拼写错误 - 我认为你的onmousemove函数中你的意思是'ctx'而不是'c'

在圆形画布上单击鼠标并绘制线条？

1 个答案: