<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>Follow Mouse</title>

    <script type="text/javascript" src="utils.js"></script>

    <script type="text/javascript" src="ball.js"></script>

    <style type="text/css">

        body{background-color: silver;}

        #canvas{background-color: white;}

    </style>

</head>

<body>

    <canvas id="canvas" width="400" height="400"></canvas>

    <textarea name="" id="log" cols="30" rows="10"></textarea>

    <script type="text/javascript">

        window.onload=function(){

            var canvas=document.getElementById("canvas"),

                context=canvas.getContext("2d"),

                mouse=utils.captureMouse(canvas),

                ball=new Ball(),

                spring=0.03,

                friction=0.9,

                gravity=2,

                vx=0,

                vy=0;

                (function drawFrame(){

                    window.requestAnimationFrame(drawFrame,canvas);

                    context.clearRect(0,0,canvas.width,canvas.height);

                    var dx=mouse.x-ball.x,

                        dy=mouse.y-ball.y,

                        ax=dx*spring,

                        ay=dy*spring;

                    vx+=ax;

                    vy+=ay;

                    vy+=gravity;

                    vx*=friction;

                    vy*=friction;

                    ball.x+=vx;

                    ball.y+=vy;

                    context.beginPath();

                    context.moveTo(ball.x,ball.y);

                    context.lineTo(mouse.x,mouse.y);

                    context.stroke();

                    ball.draw(context);

                }())

        }

    </script>

</body>

</html>
utils.js 文件 https://gist.github.com/King-fly/6034511/raw/2e28359afdfb45800948f0e6bd31aa958ba7f5cb/html5+utilsball.js 文件 https://gist.github.com/King-fly/6034525/raw/4664959f6e33196b9b4520136cc67573e07c8282/ball.js

html5 spring demo的更多相关文章

  1. HTML5 LocalStorage Demo

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. 手写Spring+demo+思路

    我在学习Spring的时候,感觉Spring是很难的,通过学习后,发现Spring没有那么难,只有你去学习了,你才会发现,你才会进步 1.手写Spring思路: 分为配置.初始化.运行三个阶段如下图 ...

  3. 第一个Spring demo

    参考Spring3.x企业实战 1.新建web工程chapter5,导入jar包.注意:cglib和commons-dbcp这两个包 2.设计数据库 t_login_log表结构(存放日志信息),主键 ...

  4. Html5 Geolocation demo

    <!DOCTYPE html> <head> <meta charset="utf-8"> <title>HTML5 Geoloca ...

  5. spring demo

    参考: https://www.tutorialspoint.com/spring/spring_applicationcontext_container.htm

  6. spring boot 登录注册 demo （一）

    Welcome to Spring Boot 代码结构 src/main/java 下 controller层,路由功能dao层,数据库的访问domain,bean的存放service,业务层appl ...

  7. 【Java】 Spring依赖注入小试牛刀：编写第一个Spring ApplicationContext Demo

    0  Spring的依赖注入大致是这样工作的: 将对象如何构造(ID是什么?是什么类型?给属性设置什么值?给构造函数传入什么值?)写入外部XML文件里.在调用者需要调用某个类时,不自行构造该类的对象, ...

  8. 【spring boot】SpringBoot初学（2） - properties配置和读取

    前言 只是简单的properties配置学习,修改部分"约定"改为自定义"配置".真正使用和遇到问题是在细看. 一.主要 核心只是demo中的: @Proper ...

  9. Spring Boot（5）一个极简且完整的后台框架

    https://blog.csdn.net/daleiwang/article/details/75007588 Spring Boot(5)一个极简且完整的后台框架 2017年07月12日 11:3 ...

随机推荐

  1. Mysql 中 like 查询存在反斜杠的解决办法

    如 要查询   %\ABC\% 应该这样写, 写成四个反斜杠 like '%\\\\ABC\\\\%'

  2. JavaScript基础-面向对象编程<2>

    2.动态添加,修改和删除对象属性和方法 例如:用类Object()创建一个空对象user,然后修改其行为. (1) 添加属性 var user=new Object(); //创建一个没有属性和方法的 ...

  3. java Springmvc ajax上传

    ajax上传方式相对于普通的form上传方式要便捷,在更多的时候都会使用ajax (简单的小示例) 1.要先去下载一个 jquery.ajaxfileupload.js(基于jquery.js上的js ...

  4. C# 清除当前窗体中TextBox控件中的内容

    //当有多个窗体时,对顶层的窗口进行操作,例如:我们开发具有录入功能的界面的时候,为了防止提交后的二次(重复)录入,希望点击提交按钮并提示成功后,界面的所有文本框内容能够自动清空.NET Framew ...

  5. OpenJudge 2756 二叉树

    1.链接地址: http://bailian.openjudge.cn/practice/2756/ 2.题目: 总时间限制: 1000ms 内存限制: 65536kB 描述 如 上图所示,由正整数1 ...

  6. hdu 5000 Clone

    dp,用dp[i][j],表示和为i的前j个维度的种类.其中arr[i],表示第i维的最大值. 则\begin{equation} dp[i][j] = \sum_{0 \leq k \leq \mi ...

  7. Nginx+keepalived实现负载均衡

    Nginx的优点是: 1.工作在网络的7层之上,可以针对http应用做一些分流的策略,比如针对域名.目录结构,它的正则规则比HAProxy更为强大和灵活,这也是它目前广泛流行的主要原因之一,Nginx ...

  8. php用正则表达式获取网站的标题内容

    已知网站的网址,用php获取网站的内容. 编写正则表达式. 用preg_match_all函数获取标题内容. $url='http://www.m-ivi.com'; $content=file_ge ...

  9. 关于静态库和动态库的理解(C++)

    库的存在,是软件模块化的基础. 库存在的意义: } 库是别人写好的现有的,成熟的,可以复用的代码,你可以使用但要记得遵守许可协议.      } 现实中每个程序都要依赖很多基础的底层库,不可能每个人的 ...

  10. NFS挂载及写入故障

    最近在做架构时,分离出来一台图片服务器,图片服务器是通过NFS(网络文件系统)给两台web服务器提供图片存储的,在编辑NFS配置文件(/etc/exports)时:想了一下,允许访问NFS共享目录的范 ...