<!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. 深度为君剖析CTO、技术总监、首席架构师的区别

      CTO.技术总监.首席架构师的区别 经常有创业公司老板来拜访我,常常会拜托给我一句话:帮我找一个CTO. 我解释的多了,所以想把这个写下来,看看你到底需要的应该是啥. 一.高级程序员 如果你是一个 ...

  2. [学习线路] 零基础学习hadoop到上手工作线路指导（初级篇）

    about云课程最新课程Cloudera课程   零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.在刚接触云计算,曾经想过培训,但是培训机构的选择就让我很纠结.所以索性就自己学习了. ...

  3. SQL Serever学习5——数据库配置

    数据库的主要属性 限制访问 用来设置数据允许用户访问的状态,或者说允许多少客户访问,有3个选项: MULTI_USER(多个),大多数数据库正常状态,允许多个用户同时访问该数据库. SINGLE_US ...

  4. WPF中ScrollViewer嵌套引发滚动失灵的Bug

    事情起因 测试报告说存在滚动条不能拖动的情况,我们几个开发人员多次测试都未重现该问题.后面发现是操作系统的问题,在XP和部分Win7上会存在该问题.而在我们开发人员的机器上,包括Win7 SP1,Wi ...

  5. csharp:Conversion Between DataTable and List

    /// <summary> /// http://www.codeproject.com/Tips/784090/Conversion-Between-DataTable-and-List ...

  6. dukuwiki简单教程

    =====请先阅读下面的说明,有助于你快速入门===== * DokuWiki(也就是我们通常称谓的wiki) 支持一些简单的标记语言, 以尽最大可能使文档看上去更友好. * 你可以把它理解为一种和c ...

  7. 微信小程序开发6-WXSS

    1.WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果.WXSS与Web开发中的CSS类似.为了更适合小程序开发,WXSS对C ...

  8. HW—词频统计

    第一次个人作业——词频统计 第一次做这种大作业,明显感觉陌生,各种规范和技能也是第一次使用,希望自己好运. 目录:一.基本要求 二.需求分析及时间估计 三.实现思路及过程 四.测试用例.时间性能分析及 ...

  9. java 简单工厂 工厂模式

    <Head First 设计模式>学习中 分类 简单工厂模式(Simple Factory) 工厂方法模式(Factory Method) 抽象工厂模式(Abstract Factory) ...

  10. CPU纯软件半虚拟化技术

    在2003年出现的Xen,使用了另外的一种半虚拟化的方案来解决x86架构下CPU的敏感指令问题.主要采用Hypercall技术.Guest OS的部分代码被改变,从而使Guest OS会将和特权指令相 ...