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>

  • 相关阅读:
    Windows下Tomcat配置虚拟路径
    Windows下Tomcat配置虚拟主机
    Windows下Tomcat的下载安装与配置
    Windows系统下Jdk的下载安装与配置
    SpringBoot项目中Swagger的配置和使用
    Windows 10通过指定端口进行远程访问的防火墙设置
    Java反射
    Java导出Pdf格式表单
    排序
    二叉查找树
  • 原文地址:https://www.cnblogs.com/zyx-blog/p/9335365.html
Copyright © 2011-2022 走看看