html5 - Skew a line on canvas using JavaScript -
i drawing lines on canvas. user can select particular line , able skew line. skew, mean can drag 1 end point of line desired point on same x-axis. how can using javascript , html5 canvas?
the general way draw line this:
ctx.moveto(line.startx, line.starty); ctx.lineto(line.endx, line.endy); ctx.stroke();
and can add eventlisteners , check see if mouse near line...
window.addeventlistener("mousemove", function(e) { mouse.x = e.layerx || e.offsetx; mouse.y = e.layery || e.offsety; // check see if mouse near line(s) here... // can change x/y , start/end // example: if (mouse.x <= line.startx + 5 || mouse.x >= line.startx - 5) { // mouse within 5px of first x } });
Comments
Post a Comment