zoukankan      html  css  js  c++  java
  • html5 动画(图片)移动实质

    先死后活法。

    静态的:

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>动态一点</title>
    </head>
    <body>
       <canvas id="tsp" height="400px" width="500px" style="background-color: black"> </canvas>
     <script type="text/javascript">
         var can=document.getElementById("tsp");
         var ctxt=can.getContext("2d");
    
         function drawBall(){
             ctxt.beginPath();
             ctxt.fillStyle="#FF0000";
             ctxt.arc(30,30,10,0,360,true);
             ctxt.closePath();
             ctxt.fill();
         }
         drawBall();
    
     </script>
    </body>
    </html>

    如图:

    动态:

    1:(事件注册) 安aswd 接受 并处理事件源。

    2:画布绘图( ctxt.arc(30,30,10,0,360,true); )前面2个参数动态产生

     2.1:申明全局变量

     2.2:上一步操作((事件注册) 安aswd 接受 并处理事件源。)修改全局变量

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>动态</title>
    </head>
    <body onkeydown="test()">
       <canvas id="tsp" height="400px" width="500px" style="background-color: black"> </canvas>
     <script type="text/javascript">
         var can=document.getElementById("tsp");
         var ctxt=can.getContext("2d");
    
         var ballX=30,
             ballY=30;
         function drawBall(){
             ctxt.beginPath();
             ctxt.fillStyle="#FF0000";
             ctxt.arc(ballX,ballY,10,0,360,true);
             ctxt.closePath();
             ctxt.fill();
         }
    drawBall();
    function test(){ ctxt.clearRect(0,0,400,300); var code=event.keyCode; switch(code){ case 87: ballY--; break; case 68: ballX++; break; case 83: ballY++; break; case 65: ballX--; break; } drawBall(); }; </script> </body> </html>

    总结:看test键盘按钮事件处理有个ctxt.clearRect(0,0,400,300);看单词就知道是清除什么,然后调用drawBall函数 绘图。

    即最后就是 先回个图,后清除,又画图,后又清除 又继续画图 .....这样的循环。当然具体的实现还有其他的。

    就产生动态。具体代码可复制直接运行(需要高版本浏览器)

  • 相关阅读:
    127.0.0.1(转) Anny
    轮岗开发后再看测试(转) Anny
    如何做好功能测试的方法(转) Anny
    Search Framework: Search Result checklist(转) Anny
    What is a Private IP Address(转) Anny
    Private IP Addresses(转) Anny
    公共模式资源库链接 Anny
    What is Dynamic DNS? Anny
    随机数产生
    tomcat源码阅读_代码篇4
  • 原文地址:https://www.cnblogs.com/y112102/p/3084869.html
Copyright © 2011-2022 走看看