<!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. RSA算法使用介绍

    http://www.cnblogs.com/AloneSword/p/3326750.html RSA是目前最有影响力的公钥加密算法,该算法基于一个十分简单的数论事实:将两个大素数相乘十分容易,但那 ...

  2. (转)安装程序发布利器——InstallShield 2011 Limited Edition

    最近经常写WCF服务和Windows服务,之前知道可以通过vs2010自带的“安装项目”可以发布程序,但是自vs2010起,同时提供了InstallShield LE. 下面我们通过图示,来了解Ins ...

  3. JavaScript 学习笔记： 扩充类型的功能

    JavaScript 是允许给基本类型扩充功能的.例如,可以通过对Object.prototype增加方法,可以让该方法对所有的对象都可用. 这样的方式对函数,数组,字符串,数字,正则表达式和布尔值同 ...

  4. ajax和jsonp的封装

    一直在用jQuery的ajax,跨域也是一直用的jQuery的jsonp,jQuery确实很方便,$.ajax({...})就可以搞定. 为了更好的理解ajax和jsonp,又重新看了下书,看了一些博 ...

  5. 百练_4120 硬币（DP）

    描述 宇航员Bob有一天来到火星上,他有收集硬币的习惯.于是他将火星上所有面值的硬币都收集起来了,一共有n种,每种只有一个:面值分别为a1,a2… an. Bob在机场看到了一个特别喜欢的礼物,想买来 ...

  6. Linux内核Radix Tree（三）：API介绍

    1.     单值查找radix_tree_lookup 函数radix_tree_lookup执行查找操作,查找方法是:从叶子到树顶,通过数组索引键值值查看数组元素的方法,一层层地查找slot.其列 ...

  7. PHP初学留神(五)·小结

    来学习快两个月了,这周末即将回家开始写论文.那么走之前,好好总结一下这两个月的所学所得吧.这段时间,在实验室里做的Web开发主要涉及到了web开发的一些框架内容以及php基础知识.思维导图记录如下. ...

  8. hdu 3336 Count the string KMP+DP优化

    Count the string Problem Description It is well known that AekdyCoin is good at string problems as w ...

  9. C99标准中的部分新特性

    我有点怀疑我会不会C语言了. 1.变长数组(VLA) ; scanf("%d", &n); int arr[n]; 2.数组初始化 ] = {[] = , [] = , [ ...

  10. 7.MVC框架开发（创建层级项目）

    在一个项目比较大的时候,就会有多个层级项目 1)在项目中选定项目右建新建区域(新的层级项目),项目->右键->添加->区域,构成了一套独立的MVC的目录,这个目录包括Views,Co ...