javascript - 如何在ipad上的html5 canvas上绘制多个圆圈

Question

它一次只画一个圆，但想一次画多个圆，即在 ipad View 上不止一个圆

//touch events for circle
    var canvas = document.getElementById('paint'),
    ctx = canvas.getContext("2d"),
    w = canvas.width,
    h = canvas.height, circle = {}, drag_circle= false;

画圈的听众

  tmp_canvas.addEventListener("touchstart", touchHandler_circle, false);
  tmp_canvas.addEventListener("touchmove", touchHandler_circle, false);
  tmp_canvas.addEventListener("touchend", touchHandler_circle, false)

处理事件的函数

function touchHandler_circle(event) {
  if (event.targetTouches.length == 1) { 
    var touch = event.targetTouches[0];

    if (event.type == "touchstart")
    {
            circle.X= touch.pageX;
            circle.Y= touch.pageY;
            drag_circle= true;
    } 
      else if (event.type == "touchmove") {
      if (drag_circle) {
        tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

        circle.width = touch.pageX +circle.X;
        circle.height = touch.pageY +circle.Y ;
          //radius 
          var radius= Math.max(Math.abs(touch.pageX -circle.X),
          Math.abs(touch.pageY -circle.Y)) / 2;
          tmp_ctx.beginPath();
          tmp_ctx.arc(circle.width,circle.height,radius,0,Math.PI*2,false);
          tmp_ctx.stroke();
          tmp_ctx.closePath();
        draw_circle_ipad();
      }
    } else if (event.type == "touchend" || event.type == "touchcancel") {
      drag_circle = false;
    }
  }

Answer 1

线

tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

清除整个 Canvas 并移除之前的圆圈。如果你想保留其他圆圈，你需要将它们存储在某个地方并重新绘制它们。