Javascript 如何在ipad上的html5画布上绘制多个圆圈

Javascript 如何在ipad上的html5画布上绘制多个圆圈,javascript,html,Javascript,Html,它一次只画一个圆,但希望一次画多个圆,即在ipad视图上画多个圆 //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.addEve

它一次只画一个圆,但希望一次画多个圆,即在ipad视图上画多个圆

//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;
    }
  }
线路

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

清除整个画布并删除前面的圆圈。如果你想保留其他圆圈,你需要将它们存储在某个地方并重新绘制。

什么是
tmp\u ctx
?它来自哪里?你能做一把小提琴吗?