Javascript 如何在ipad上的html5画布上绘制多个圆圈
它一次只画一个圆,但希望一次画多个圆,即在ipad视图上画多个圆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
//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
?它来自哪里?你能做一把小提琴吗?