如何借鑑HTML5畫布多圈iPad上

Question

它是在同一時間只繪製一個圓，但要同時繪製多個圓即在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; 
    } 
    } 

Answer 1

行

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

清除整個畫布並刪除以前的圓圈。如果你想保留其他的圈子，你需要將它們存儲在某個地方並重新繪製它們。