zoukankan      html  css  js  c++  java
  • elastic

    <!DOCTYPE html>
    <html>
    <head>
    <title>橡皮筋</title>
    <script type="text/javascript">
    var ctx;
    var linew=10;
    var color="rgb(255,0,0)";
    var isClick;
    var mx=50;
    var my=200;
    var tid;
    function setstyle(w,c){
    ctx.lineWidth=w;
    ctx.strokeStyle=c;
    }

    function getpoint(ev){
    if(ev.layerX||ev.layerX==0){
    mx=ev.layerX;
    my=ev.layerY;
    }else if(ev.offsetX||ev.offsetX==0){
    mx=ev.offsetX;
    my=ev.offsetY;
    }
    }

    function drawall(){
    ctx.clearRect(0,0,400,400);
    setstyle(linew,color);
    ctx.beginPath();
    ctx.moveTo(50,200);
    ctx.lineTo(mx,my);
    ctx.lineTo(350,200);
    ctx.stroke();
    setstyle(2,"rbg(0,0,0");
    ctx.strokeRect(0,0,400,400);
    }

    function init(){
    isClick=false;
    ctx=document.getElementById('canvas').getContext('2d');
    drawall();
    canvasl=document.getElementById('canvas');
    canvasl.addEventListener("mousedown",findball,false);//
    canvasl.addEventListener("mousemove",moveit,false);
    canvasl.addEventListener("mouseup",finish,false);
    }

    function findball(ev){
    isClick=true;
    document.f.lg.value="mousedown";
    getpoint(ev);
    drawall();
    }

    function moveit(ev){
    if(isClick){
    document.f.lg.value="mousemove";
    getpoint(ev);
    drawall();
    }
    }

    function finish(){
    if(isClick){
    isClick=false;
    document.f.lg.value="mouseup";
    tid=setInterval(change,100);
    }
    }

    function change(){
    if(my>200){
    my-=10;
    if(my<=200){
    my=200;
    clearInterval(tid);
    }
    }
    if(my<200){
    my+=10;
    if(my>=200){
    my=200;
    clearInterval(tid);
    }
    }
    drawall();
    }
    </script>
    </head>
    <body onLoad="init();">
    <canvas id="canvas" width="400" height="400"></canvas>
    <form id="f" name="f">
    LOG:<input type="text" name="lg" id="lg" value="false"/>
    </form>
    </body>
    </html>

  • 相关阅读:
    zookeeper 简介
    缓存雪崩 缓存穿透
    SpringCloud实战2-Ribbon客户端负载均衡
    SpringCloud实战1-Eureka
    JVM笔记9-Class类文件结构
    JVM笔记8-虚拟机性能监控与故障处理工具
    JVM笔记7-内存分配与回收策略
    SpringAOP-JDK 动态代理和 CGLIB 代理
    MySQL多数据源笔记5-ShardingJDBC实战
    MySQL多数据源笔记4-Mycat中间件实战
  • 原文地址:https://www.cnblogs.com/zyx-blog/p/9335365.html
Copyright © 2011-2022 走看看