一次只绘制一个圆圈,但想一次绘制多个圆圈,即在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;
}
}
答案 0 :(得分:0)
行
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
清除整个画布并删除之前的圆圈。如果你想保留其他圈子,你需要将它们存储在某处并重新绘制它们。