【免费】http+css+script实现鼠标固定区域自由拖拽，文本图片皆可资源-CSDN文库

共1个文件

html：1个

网页设计

需积分: 0 109 浏览量 2023-01-05 10:31:16 上传评论收藏 1KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

canvas实现鼠标区间拖拽效果.rar （1个子文件）

canvas实现鼠标区间拖拽效果.html 3KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body,div{ margin:0; padding:0; } #d1{ width:720px; height: 480px; border: 2px solid #00FFD1; margin-top: 40px; margin-left: 720px; } </style> </head> <body> <div id="d1"> <canvas id="myCanvas" width="500" height="400"> <p>感谢您的信任!</p> </canvas> </div> <script> function textToImg(name) { //这块判断传过来的参数是否为空 //判断大概的长度，是否需要截取等等 var src_w; //var canvas = document.getElementById("myCanvas"); var canvas = document.createElement("canvas"); canvas.width = 200; canvas.height = 50; var context = canvas.getContext("2d"); //document.querySelector("canvas").getContext("2d"); context.font = "42px Microsoft YaHei"; src_w = context.measureText(name).width; context.fillStyle ='rgba(155, 187, 89, 0.6)'; //; 画布的颜色 alpha=0 为透明背景 //context.fillRect(0, 0, parseInt(src_w),30); context.fillStyle = "#F00"; //字体的颜色 context.textAlign = "left"; context.textBaseline = "middle"; context.fillText(name, 0, 5); //window.location.href = canvas.toDataURL("image/bmp"); return canvas.toDataURL("image/bmp") } let left=720; let top = 40; let w = 150; let h = 100; let dx = 174+left; let dy = 148+top; const canva=document.getElementById("myCanvas"); const cansText=canva.getContext("2d"); let img = new Image(); img.src= textToImg('welcome');//这里也可以是一张图片，如："./osd.bmp"; //如果是图片：img.src="./osd.bmp"; cansText.clearRect(0, 0, canva.width, canva.height); cansText.drawImage(img,0,0,w,h); //在事件外声明需要用到的变量 let ax,ay,x,y; let max_clientX =canva.width +left- w/2; let min_clientX =left+w/2; let max_clienty =canva.height+top- h/2; let min_clienty =top+h/2; alert(canva.height); alert(max_clienty); canva.onmousedown=function (e) { canva.onmousemove = function(e){ x= e.clientX;y=e.clientY; //限制移动不能超出画布 (x<dx)? ax=min_clientX : ax=max_clientX; (y<dy)? ay=min_clienty : ay=max_clienty; (x < max_clientX && x >min_clientX)? x=e.clientX : x =ax; (y > min_clienty && y <max_clienty) ? y=e.clientY : y=ay; //先清除之前的然后重新绘制 cansText.clearRect(0,0,canva.width,canva.height); cansText.drawImage(img,x-min_clientX,y-min_clienty,w,h); }; canva.onmouseup = function(){ canva.onmousemove = null; canva.onmouseup = null; }; } </script> </body> </html>

评论收藏

内容反馈