<!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. NodeJS入门篇

    在我印象里,“全栈工程师”这个词是NodeJS诞生后才逐渐火起来的,因为NodeJS赋予了JS服务器开发的能力.下面开始从一个小白的角度进军NodeJS... 前言:在学习NodeJS之前是需要安装的 ...

  2. 【angular5项目积累总结】http请求服务封装

    http.provider.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/co ...

  3. WCF Data Services 5.0 for OData V3

    https://www.microsoft.com/en-us/download/details.aspx?id=29306 VS 2010 下 安装 WCF Data Services 5.0 en ...

  4. 第5章 scrapy爬取知名问答网站

    第五章感觉是第四章的练习项目,无非就是多了一个模拟登录. 不分小节记录了,直接上知识点,可能比较乱. 1.常见的httpcode: 2.怎么找post参数? 先找到登录的页面,打开firebug,输入 ...

  5. Java如何操作对象（bean）进行动态排序？

    原文出自:https://blog.csdn.net/seesun2012 简介如题:Java如何操作对象(bean)进行动态排序?Java实体类(bean)动态排序? 原理:利用反射根据指定的属性值 ...

  6. Java中多个集合的交集，并集和差集

    一.交集 java中交集使用 A.retainAll(B) ,交集的结果在集合A中. import org.junit.Test; import java.util.HashSet; import j ...

  7. 自定义Jquery插件——由于项目需要，对页面中过长的文本进行截取，鼠标移上去有一个title的提示，所以做了一个Jquery过长文本处理的插件

    由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件下面是代码: // 掉用方式支持 $('select').textBeauty(1 ...

  8. git杂记-查看历史提交

    普通查看:git log.输入q退出比较. $ git log commit ca82a6dff817ec66f44342007202690a93763949 Author: Scott Chacon ...

  9. css专业术语笔记

    1. 属性 如height.color等,称作css的属性. 2. 值 在css中,如:10px, 50%, #ccc等这些都称作css的值.比较常见的类型值有:整数值,数值,百分比值,长度值,颜色值 ...

  10. 用CSS3/JS绘制自己想要的按钮

    我认为按钮的绘制分以下三个步骤 第一步,绘制按钮的轮廓 选择合适的html标签,设置轮廓的CSS /* html代码 */ <a href="#" class="b ...