Is a very simple box selection function, native JS written.

Effect:

Code:

<! DOCTYPE html> <html> <body> <canvas id="myCanvas" width="1000" height="800" style="border:1px solid #d3d3d3;" > Your browser does not support the HTML5 canvas tag. </canvas> <br> <span>local</span> <p id="local"></p> <span>down</span> <p id="down"></p> <span>up</span> <p id="up"></p> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); c.addEventListener('mousemove', move, false) c.addEventListener('mousedown', down, false) c.addEventListener('mouseup', up, false) var ax = 0, ay = 0, mx = 0, my = 0, bx = 0, by = 0, width = 0, height = 0, paint = false; Function move(e) {document.getelementById ("local"). InnerHTML = e.pagey + ', '+ e.pagex mx = e.pagex; function move(e) {document.getelementById ("local"). my = e.pageY; PaintReact ()} function down(e) {document.getelementById ("down").innerhtml = e.pagey + ', '+ e.pagex ax = e.pagex; ay = e.pageY; Paint = true} function up(e) {document.getelementById ("up").innerhtml = e.pagey + ', '+ e.pagex = e.pagex; by = e.pageY; paint = false } function paintReact() { ctx.clearRect(0, 0, 1000, 800) width = mx - ax height = my - ay console.log(width, height); if (paint) { ctx.strokeRect(ax, ay, width, height) } } </script> </body> </html>Copy the code