<!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. Oracle执行计划的查看

    前言 一个系统在刚开始的时候,由于数据库中数据量不大,开发人员的主要精力都在业务与功能实现上.系统完成部署上线后随着时间的累积,每个表中的数据都在不断增长,我们往往会发现系统越来越慢,这可能是程序设计 ...

  2. iOS语音播报文字

    记得大学的时候学微软Window Phone时,有语音识别类似苹果的嘿,Siri.今天无聊百度搜了一下,搜到苹果语音播报文字.自己试了下还挺好玩. 1.引入框架#import <AVFounda ...

  3. php中continue关键字

    跳出本次循环进行下一次. 在while和do while中也可以用 $num = 0; while($num < 10) { $num ++; if($num === 5) { echo 'eq ...

  4. 使用 csc.exe 编译C#代码

    csc.exe是C#的编译器,可以将C#代码编译为IL中间语言代码(exe.dll),然后再通过.net framework中的clr内的JIT(即时编译器)将中间语言代码编译为机器语言,然后再由机器 ...

  5. MongoDB基本用法（增删改高级查询、mapreduce）

    TestCase.java package com.wujintao.mongo; import java.net.UnknownHostException; import java.util.Arr ...

  6. Docker学习之Centos7下安装

    Docker学习之Centos7下安装 centos7 64下直接使用yum安装docker环境,步骤如下: 卸载旧版本docker sudo yum remove docker docker-com ...

  7. 经典SQL分页语句

    select top pageSize, * from (SELECT row_number() over(order by id desc) as rownumber,*FROM tb1) A wh ...

  8. Dapper扩展

    using Dapper; using MySql.Data.MySqlClient; using System; using System.Collections.Generic; using Sy ...

  9. Java代码生成图片验证码

    1.jsp页面显示验证码,src跳转到Controller里的:getImg_validate,reloadImg()作用是点击验证码就会换一张(重新请求getImg_validate) <ul ...

  10. csharp: string Encoding

    /// <summary> /// 中文转unicode /// </summary> /// <param name="str"></p ...