HTML5的canvas新标签以及拖放

超、凢脫俗 2021-10-26 16:34 355阅读 0赞

今天重新练习了一下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>

实现的结果：

![1499839-20190801095700174-162639651.png][]

![1499839-20190801095733798-2002697541.png][]

谢谢你这么好看，还看我写的博客！

转载于:https://www.cnblogs.com/niupeinan/p/11280758.html

[1499839-20190801095700174-162639651.png]: /images/20211026/3bf5a4722b83424693b57d8a22f0574e.png
[1499839-20190801095733798-2002697541.png]: /images/20211026/a6bcfc68c25c4149bcfa9967282795c4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，355人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5新特性拖放（拖拽）

html5新特性拖放（拖拽）定义抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。拖放的流程对应的事件选中 ---> 拖动 -

旧城等待，/ 2023年06月25日 15:26/ 0 赞/ 13 阅读

相关 HTML5：Canvas 标签

什么是 canvas？ H5 `<canvas>` 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。`<canvas>` 标签只是图形容器，必须使用脚本

逃离我推掉我的手/ 2022年10月11日 13:33/ 0 赞/ 310 阅读

相关 HTML5新标签以及用法

HTML5的声明： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

分手后的思念是犯贱/ 2022年06月07日 01:17/ 0 赞/ 266 阅读

相关 HTML5 拖放API

在HTML 5 之前可以使用mousedown、mousemove、mouseup来实现拖放操作，但着只支持在浏览器内部的拖放，而在HTML 5中，支持浏览器与其他应用程序之间

浅浅的花香味﹌/ 2022年05月31日 12:51/ 0 赞/ 265 阅读

相关 HTML5 如何实现拖放'N'拖放

在网络开发人员需要掌握的所有技术中，看起来最容易造成混淆和潜在问题的是拖拽。这不是一项新技术，它已存在多年，但许多开发人员仍然执着于基于jQuery的旧方法，以牵连复杂（有

Myth丶恋晨/ 2022年05月20日 02:41/ 0 赞/ 266 阅读

相关 HTML5 的拖放（实例：两个div之间拖放图片）

重点解释：首先，为了使元素（如本图片）可拖动，把 draggable 属性设置为 true ： dataTransfer.setData() 方法设置被拖数据的数据类型和

绝地灬酷狼/ 2022年03月31日 10:38/ 0 赞/ 273 阅读

相关 HTML5新增的拖放API

HTML5新增了关于拖放的API，通过拖放API可以让HTML页面的任意元素都变成可拖动的，通过使用拖放机制可以开发出更友好的人机交互界面。拖放操作可以分成两个动作：在某个元素

- 日理万妓/ 2022年02月17日 11:06/ 0 赞/ 324 阅读

相关 html5 “拖放”

拖放主要是两个部分组成，drag：拖动，drop：放置！既抓取元素后拖到另一个位置！要实现拖放首先要把被拖动元素设置为可拖动，既： draggbile="true

痛定思痛。/ 2021年11月02日 13:46/ 0 赞/ 459 阅读

相关 HTML5的canvas新标签以及拖放

今天重新练习了一下H5的画布结合拖放的使用，以下是实现的代码： <!doctype html> <html lang="en"> <head>

超、凢脫俗/ 2021年10月26日 16:34/ 0 赞/ 356 阅读

相关 HTML5中的拖放功能

大家好，我是魔王哪吒，很高兴认识你~~ 哪吒人生信条：如果你所学的东西处于喜欢才会有强大的动力支撑。每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，

ゝ一纸荒年。/ 2021年07月25日 02:44/ 0 赞/ 433 阅读