• drag-html


    <!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,y,w,h);
    ctx.closePath();
    ctx.fill();
    }

    function clear() {
    ctx.clearRect(0, 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,0,WIDTH,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>

  • 相关阅读:
    JAVA面向对象继承 及super的学习
    JAVA 封装的学习
    submit和button的区别
    Servlet四大域对象
    转发和重定向的区别
    JSTL标签用法 详解
    JSP中EL表达式的使用
    解决idea的项目启动报404的问题
    intellij idea 创建动态web项目
    解决mysql数据库中文乱码问题
  • 原文地址:https://www.cnblogs.com/oxspirt/p/8945627.html
Copyright © 2020-2023  润新知