今天重新练习了一下H5的画布结合拖放的使用，以下是实现的代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="shortcut icon" href="./imges/icon_2.png"> <title>Document</title> </head> <body> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" style="width: 500px; height: 500px; border: 1px solid red; margin:100px auto"></div> <canvas id="mycanvas" style="width: 300px; height: 100px; border: 1px solid green;" draggable="true" ondragstart="drag(event)"></canvas> <script> var mycanvas = document.querySelector('#mycanvas'); var mycanvas1 = mycanvas.getContext("2d"); mycanvas1.font = "50px Arial"; mycanvas1.strokeText("Hello World", 10, 80); function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function allowDrop(ev) { ev.preventDefault(); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </body> </html>
实现的结果：
谢谢你这么好看，还看我写的博客！