<!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. [译]用R语言做挖掘数据《二》

    数据探索 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou,密码shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到程序: ...

  2. springmvc 权限 测试版

    参考博文 https://blog.csdn.net/u011277123/article/details/68940939 1.Listener加载权限信息 2.interceptor验证权限 测试 ...

  3. Spring 学习（十）--- Dispatch 分发逻辑

    问题 : Spring 分发逻辑是如何的 概述 本文讲解Spring 请求到返回视图的分发过程. 分发逻辑 分发逻辑可以使用下图来表示. 总共七个步骤 : 接收请求,经过 DispatcherServ ...

  4. 解决Genymotion下载device时较慢的问题

    Genymotion添加device时,加载速度很慢: 简单方法处理如下: 1.首先找到如下目录文件名 打开后找到如下行,复制该地址直接使用迅雷等下载工具下载好该ova文件: 2.放置下载好的文件至对 ...

  5. Cheatsheet: 2018 11.01 ~ 2019 02.28

    Golang FromXToGo micro - A microservice toolkit Other Easy parsing of Excel spreadsheet format with ...

  6. [javaSE] IO流（递归查找指定文件）

    递归方法,实现查找目录中以.java为后缀的文件路径,并存入文本文件中 定义一个静态方法fileToLine(),传入参数:File对象目录,List集合对象(List<File> 这样做 ...

  7. UVA 624(01背包记录路径)

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  8. python学习之老男孩python全栈第九期_day018知识点总结——正则表达式、re模块

    一. 正则表达式 正则表达式本身和python没有什么关系,就是匹配字符串内容的一种规则. 官方定义:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成 ...

  9. sql:PostgreSQL9.3 Using RETURNS TABLE vs. OUT parameters

    http://www.postgresonline.com/journal/archives/201-Using-RETURNS-TABLE-vs.-OUT-parameters.html http: ...

  10. Drupal7安装注意事项

    1.在php.ini中将max_execution_time = 2400,memory_limit = 256M