大佬教程收集整理的这篇文章主要介绍了使用HTML5在画布内拖放功能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我的实际要求是将图像拖动到应该在画布内完成的文本框中…
请分享您的想法.以下链接我曾经学习拖放但它应该在画布内完成..
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop
从您在问题中的有限描述中,听起来像是在画布上拖动项目,本教程可能是最佳匹配.
这是您可以粘贴到文件中并在符合HTML5的浏览器中打开的实际代码,它将起作用：
<!doctype html> <html> <head> <Meta charset="UTF-8" /> <title>Canvas Drag and Drop Test</title> </head> <body> <section> <div> <canvas id="canvas" width="400" height="300"> This text is displayed if your browser does not support HTML5 Canvas. </canvas> </div> <script type="text/javascript"> var canvas; var ctx; var x = 75; var y = 50; var WIDTH = 400; var HEIGHT = 300; var dragok = false; function rect(x,y,w,h) { ctx.beginPath(); ctx.rect(x,h); ctx.closePath(); ctx.fill(); } function clear() { ctx.clearRect(0,WIDTH,HEIGHT); } function init() { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); return seTinterval(draw,10); } function draw() { clear(); ctx.fillStyle = "#FAF7F8"; rect(0,HEIGHT); ctx.fillStyle = "#444444"; rect(x - 15,y - 15,30,30); } function mymove(E){ if (dragok){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; } } function myDown(E){ if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && e.pageY > y -15 + canvas.offsetTop){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; dragok = true; canvas.onmousemove = mymove; } } function myUp(){ dragok = false; canvas.onmousemove = null; } init(); canvas.onmousedown = myDown; canvas.onmouseup = myUp; </script> </section> </body> </html>
以上是大佬教程为你收集整理的使用HTML5在画布内拖放功能全部内容，希望文章能够帮你解决使用HTML5在画布内拖放功能所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。