<!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. C++例题练习(1)

    环境:Dev-C++( Version:5.6.1) 一.求2个或3个正整数中的最大数,用带有默认参数的函数实现 代码实现: #include <iostream> using names ...

  2. ###Linux基础 - 1

    点击查看Evernote原文. #@author: gr #@date: 2014-10-11 #@email: forgerui@gmail.com 前言 为什么学习Linux?:-) 酷Cool ...

  3. 第二十四篇、iOS 10版本适配

    随着iOS10发布的临近,大家的App都需要适配iOS10,下面是我总结的一些关于iOS10适配方面的问题,如果有错误,欢迎指出. 1.系统判断方法失效: 在你的项目中,当需要判断系统版本的话,不要使 ...

  4. Git和CocoaPods的简单使用

    Git是一款免费.开源的分布式版本控制系统,还有一种SVN的开源的集中式版本控制系统.分布式相比于集中式的最大区别在于开发者可以提交到本地,每个开发者通过克隆(git clone),在本地机器上拷贝一 ...

  5. SDL_Test库(1)——SDL不用TTF库绘制文字

    SDL库有很多的扩展,这很方便.但是每个扩展库都很臃肿,一般都会拖上额外的两三个开源库,更有甚者,扩展库的大小比SDL库本身还大得多.但有一个自带的.很有用的库很容易被大家忽视.它就是本文要讲的SDL ...

  6. 关于XML与类型Class的映射

    我们知道数据的持久化是编程必须面对的问题.我们可以保存数据到数据库.Excel表.XML文件.TXT文件等等.那么我们编程中经常会遇到对Xml文件的操作.在http://www.cnblogs.com ...

  7. springmvc学习（三）

    第一点---------使用 @RequestMapping 映射请求• Ant 风格资源地址支持 3 种匹配符:?:匹配文件名中的一个字符 *:匹配文件名中的任意字符 **:** 匹配多层路径 @R ...

  8. [翻译][MVC 5 + EF 6] 6：创建更复杂的数据模型

    原文:Creating a More Complex Data Model for an ASP.NET MVC Application 前面的教程中,我们使用的是由三个实体组成的简单的数据模型.在本 ...

  9. linux共享文件samba安装与java读取外部文件夹方法

    测试环境RedHat 6.4 一．安装 samba组件安装: (1)首先用“rpm –qa |grep samba”命令检验系统samba服务是否安装. #rpm –qa |grep samba sa ...

  10. JQ方法大全

    Dom:Attribute:$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"te ...