Shulou(Shulou.com)06/01 Report--

The knowledge of this article "how to use canvas to achieve rubber band drawing" is not understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use canvas to achieve rubber band drawing" article.

What is rubber band style?

It means to stretch like a rubber band when drawing.

Examples are as follows: point_down:

Train of thought

The idea is very simple, only the rubber band drawing function should be paid attention to. The following summarizes the ideas of the three stages of mousedown,mousemove,mouseup.

Mousedown: record the start position, drag (record whether it is dragged or not) set to true,getImageData (rubber band effect key 1)

Mousemove: get the position pos,putImageData when dragging (corresponding to getImageData, rubber band effect key 2), draw a straight line according to pos and start

Mouseup:drag reverts to false

The key lies in the two canvas methods, putImageData () and getImageData (). PutImageData () records the image when the mouse is clicked, and getImageData () restores it accordingly. If these two methods are not implemented, the following effects will occur

PutImageData () is equivalent to erasing all the lines "scanned".

Code:

Let canvas = document.getElementById ('canvas'), ctx = canvas.getContext (' 2d'), canvasLeft = canvas.getBoundingClientRect (). Left, / / getBoundingClientRect () get the element position canvasTop = canvas.getBoundingClientRect (). Top; let imageData; / / record image data let start = new Map ([['Xerox Magnum null], [' YYONull]]); let drag = false / / record whether it is in a dragged state canvas.onmousedown = function (e) {let pos = positionInCanvas (e, canvasLeft, canvasTop); start.set ('x, pos.x); start.set ('yearly, pos.y); drag = true; / / record imageData imageData = ctx.getImageData. } canvas.onmousemove = function (e) {if (drag = true) {let pos = positionInCanvas (e, canvasLeft, canvasTop); / / equivalent to erasing all the scanned lines and redrawing ctx.putImageData (imageData, 0,0); ctx.beginPath () Ctx.moveTo (start.get ('x'), start.get ('y')); ctx.lineTo (pos.x, pos.y); ctx.stroke ();}} canvas.onmouseup = function (e) {drag = false } function positionInCanvas (e, canvasLeft, canvasTop) {/ / get the mouse click position in canvas return {x:e.clientX-canvasLeft, y:e.clientY-canvasTop}} above is the content of this article on "how to use canvas to realize rubber band drawing". I believe you all have some understanding. I hope the content shared by the editor will be helpful to all of you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.