javascript - How to draw a touch straight line in HTML5 canvas -
i'm trying create drawing tool set ipad , far i've done square, i'm not sure how go coding straight line? here's code finished square, maybe it'll help. know how code straight line. after that, if wanted draw circles well? in code need change?
here's code:
javascript (square/rectangle)
// "draw rectangle" button function rect(){ var canvas = document.getelementbyid('canvassignature'), ctx = canvas.getcontext('2d'), rect = {}, drag = false; function init() { canvas.addeventlistener("touchstart", touchhandler, false); canvas.addeventlistener("touchmove", touchhandler, false); canvas.addeventlistener("touchend", touchhandler, false); } function touchhandler(event) { if (event.targettouches.length == 1) { //one finger touche var touch = event.targettouches[0]; if (event.type == "touchstart") { rect.startx = touch.pagex; rect.starty = touch.pagey; drag = true; } else if (event.type == "touchmove") { if (drag) { rect.w = touch.pagex - rect.startx; rect.h = touch.pagey - rect.starty ; draw(); } } else if (event.type == "touchend" || event.type == "touchcancel") { drag = false; } } } function draw() { ctx.fillrect(rect.startx, rect.starty, rect.w, rect.h); ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = "orange"; } init(); }
just substitute this:
ctx.fillrect(rect.startx, rect.starty, rect.w, rect.h); ctx.clearrect(0, 0, canvas.width, canvas.height);
with this:
ctx.fillline(rect.startx, rect.starty, rect.w, rect.h); ctx.clearline(0, 0, canvas.width, canvas.height);
this of course not 100% valid code, concept should work , you'll point
Comments
Post a Comment