• 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>

  • 相关阅读:
    常用的公共 DNS 服务器 IP 地址
    组网参考资料
    华为交换机配置telnet、SSH
    华为三层交换+双链路出口
    ACL流策略
    MacBook苹果电脑绕过BootCamp安装Win7双系统
    nslookup
    熟悉Linux操作系统的命令接口、图形接口和程序接口
    “发现一个错误”——laravel开发
    document.forms用法示例介绍
  • 原文地址:https://www.cnblogs.com/oxspirt/p/8945627.html
Copyright © 2020-2023  润新知