javascript - Canvas signature on scroll changes mouse draw location -
I am trying to use canvas so that someone with a mouse can write their signature until I see the screen By stretching or scrolling, everything works until it pulls the line at a different place than the mouse.
code:
function onMouseUp (event) {'strict experiment'; Mouse pressed = false; } Ceremony onMouseMove (event) {'strict experiment'; If (mouse button) {event.preventDefault (); Mousex = event. Client X - can.offsetLeft - mleft; MouseY = event.clientY - can.offsetTop - mtop; Ctx.lineTo (mousex, mousse); ctx.stroke (); }} Function onMouseDown (event) {'use strict'; MousePressed = True; Mousex = event. Client X - can.offsetLeft - mleft; MouseY = event.clientY - can.offsetTop - mtop; Ctx.beginPath (); Ctx.moveTo (mousex, mousse); } Can.addEventListener ('mousemove', onMouseMove, incorrect); Can.addEventListener ('mousedown', onMouseDown, False); Can.addEventListener ('mouseup', onMouseUp, Incorrect); looks like HTML: & lt; Canvas id = "signature" width = "567" height = "150" & gt; & Lt; / Canvas & gt;
event.clientX / y top left corner of viewport Therefore the scroll has not been kept in mind. Relates to the event.pageX / y document. So this is the situation on the screen that the event has occurred with scroll. You can change all the references from clientX to pageX and clientY in pageY and it should work.
शुरुआती के लिए सीएसएस HTML उदाहरण कोड स्निपेट
ReplyDeleteअनुच्छेद टैग फ़ॉन्ट-परिवार फ़ॉन्ट-आकार उदाहरण