<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<canvas id="canvas" style="display:block;border:1px solid #ccc;margin:20px auto"></canvas>

</body>

<script>

    var ball={x:512,y:100,r:20,g:2,vx:-4,vy:0,color:"#005588"};//x,y表示坐标   半径r  加速度g 速度vx 速度vy也就是y方向的速度

    window.onload=function(){

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

        canvas.width=1024;

        canvas.height=768;

        var context=canvas.getContext("2d");

        setInterval(

                function(){

                    render(context);

                    update();

                },50);

        function update(){

            ball.x+=ball.vx;

            ball.y+=ball.vy;

            ball.vy+=ball.g;

            if(ball.y>=768-ball.r){

                ball.y=768-ball.r;

                ball.vy=-ball.vy*0.5;

            }

        }

        function render(cxt){

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

            cxt.fillStyle=ball.color;

            cxt.beginPath();

            cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);

            cxt.closePath();

            cxt.fill();

        }

    }

</script>

</html>

canvas抛物线运动demo的更多相关文章

  1. 移动端上传照片 预览+Draw on Canvas's Demo（解决 iOS 等设备照片旋转 90 度的 bug）

    背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...

  2. 一个canvas的demo

    该demo放于tomcat下运行,否则出现跨域错误 <!DOCTYPE html> <html> <head> <meta charset="utf ...

  3. canvas粒子demo

    之前在codepen上看到了类似的效果,于是自己也使用coffee-script写了个相似的demo 效果:http://whxaxes.github.io/canvas-test/src/Parti ...

  4. H5 canvas 小demo之小球的随机运动

    1:结构之html----balls.html <!DOCTYPE html> <html> <head lang="en"> <meta ...

  5. canvas动画--demo

    canvas动画:bubble

  6. canvas时钟demo

    显示效果如下 源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. JS + Canvas画图Demo

    直接上代码,复制粘贴就能用: <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  8. 基于canvas图像处理的图片展示demo

    图片展示网页往往色彩繁杂,当一个网页上有多张图片的时候用户的注意力就很不容易集中,而且会造成网站整个色调风格的不可把控. 能不能把所有的预览图变成灰度图片,等用户激活某张图片的时候再上色呢? 以前,唯 ...

  9. 有趣的Javascript：只需一个JS让万恶的IE5、IE6、IE7、IE8全都支持H5原生Canvas绘图（有演示demo）

    该demo支持IE5以上任意内核的浏览器 查看演示demo:支持IE5以上版本的浏览器Canvas绘图demo 补充:chats.js和echarts等图表库也可以使用本方法兼容IE6以上浏览器 1. ...

随机推荐

  1. OpenStack 组成 架构

    Components of OpenStack OpenStack is on a mission: to provide scalable, elastic cloud computing for ...

  2. iOS开源项目周报0209

    由OpenDigg 出品的iOS开源项目周报第七期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等.Hedwig 向 ...

  3. Java jxl导入excel文件，导入的数字、身份证号码、手机号变成了科学计数法，解决方案

    原文出自:https://blog.csdn.net/seesun2012 这是一个execl文件导入数据库操作,使用jxl解析execl导入数据库过程出现了科学计数法,与想要导入的数据不匹配,以下是 ...

  4. 如何应用ASP.NET MVC中的分部视图

    概述: 在ASP.NET Web Form的开发经验中,对于User Control使用比较频繁,可以减少重复的代码,利于页面模块化,这个概念也被引入了ASP.NET MVC.即“分部视图”. 1.创 ...

  5. php中的字符串常用函数 str_replace 字符串替换，替换全角空格

    <?php $str = "hello world!"; echo(str_replace(array('hello', 'world'), array('tom', 'cl ...

  6. C#PrintDocument打印尺寸调整

    /// <summary> /// 打印的按钮 /// </summary> /// <param name="sender"></par ...

  7. MySQL (一)(未完成)

    并发控制 读写锁 读锁: 共享锁 写锁: 排它锁 颗粒度 表锁,MySQL中开销最小的锁 行锁,MySQL中开销最大的锁 事务 ACID特性 原子性(Automatic) 隔离性(Isolation) ...

  8. Skype坑爹报错:“旧版本无法删除，请联络您的技术支持小组 ”的解决办法

    真是恶心的让人想吐的报错.现在终于解决了,跟大家分享一下方法. 先给问题截个图,如下 首先当我去搜解决办法之前,我已经在[控制面板]的[卸载程序]里把Skype删除了,真是让我后悔不已的操作啊!!因为 ...

  9. 实例-PHP_SELF、 SCRIPT_NAME、 REQUEST_URI区别-获取前台公用文-dirname-PHP的"魔术常量"-str_replace

    Part1:实例 $_SERVER[PHP_SELF], $_SERVER[SCRIPT_NAME], $_SERVER['REQUEST_URI'] 在用法上是非常相似的,他们返回的都是与当前正在使 ...

  10. php中怎么理解Closure的bind和bindTo

    bind是bindTo的静态版本,因此只说bind吧.(还不是太了解为什么要弄出两个版本) 官方文档: 复制一个闭包,绑定指定的$this对象和类作用域. 其实后半句表述很不清楚. 我的理解: 把一个 ...