效果如图：

html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<canvas id="canvas" style="border: 1px solid #ddd"></canvas>

<script src="ball.js"></script>

</body>

</html>

ball.js:

var ball = {x:512,y:100,r:20,g:2,vx:10,vy:0,color:"#058"};

window.onload = function () {

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

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

    canvas.width = 1024;

    canvas.height = 768;

    setInterval(

        function () {

            update();

            render(context);

        },50)

};

function update() {

    ball.x+=ball.vx;

    ball.y+=ball.vy;

    ball.vy+=ball.g;

}

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();

}

小球反弹了：

ball.js:

//更新
function update() {

    ball.x+=ball.vx;

    ball.y+=ball.vy;

    ball.vy+=ball.g;

    if(ball.y>=canvas.height-ball.r){//小球接触底边沿反弹

        // ball.vy = -ball.vy*0.5;

        ball.vy = -ball.vy;

    }else if(ball.x>=canvas.width-ball.r){

        ball.vx = -ball.vx;

    }else if(ball.x<=ball.r) {

        ball.vx = -ball.vx;

    }else if(ball.y<=ball.r){

        ball.vy = -ball.vy;

    }

}

canvas基础绘制-一个小球的坠落、反弹的更多相关文章

  1. canvas基础绘制-绚丽倒计时

    效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. canvas基础绘制-绚丽时钟

    效果图: 与canvas基础绘制-绚丽倒计时的代码差异: // var endTime = new Date();//const声明变量,不可修改,必须声明时赋值: // endTime.setTim ...

  3. 利用canvas来绘制一个会动的图画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 利用canvas来绘制一个会动的图画，欢迎指教

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. canvas基础绘制-倒计时(下)

    digit_1.js: digit = [ [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0 ...

  6. canvas基础绘制-倒计时(上)

    效果: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. canvas基础绘制-arc

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Javascript高级编程学习笔记（87）—— Canvas(4)绘制路径

    绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...

  9. 使用canvas绘制一个时钟

    周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...

随机推荐

  1. (linux)INIT_WORK和INIT_DELAYED_WORK详解

      朋友,你相信,一只蝴蝶在北京拍拍翅膀,将使得纽约几个月后出现比狂风还厉害的龙卷风吗?看过那部经典的影片蝴蝶效应的朋友们一定会说,这不就是蝴蝶效应吗.没错.蝴蝶效应其实是混沌学理论中的一个概念.它是 ...

  2. 织梦dedecms如何显示所有文章列表

    本文介绍了dedecms中显示所有文章列表的实现方法,dedecms如何显示所有文章列表,有需要的朋友参考下. 例子,dedecms中显示所有文章列表.   代码示例:{dede:channelart ...

  3. hdu 4763 Theme Section（next数组找串中三段相等）

    题意:在一个串中找 EAEBE 的形式的最长的E,其中E为一个字符串,也就是说找到前缀与后缀相同,并且串中还存在相同的一段,它们不能重复. 思路:利用next数组,next[len]代表的即是最大的相 ...

  4. 四叉树 bnuoj

    点击打开题目链接 建树+广搜一棵树:最下面有更短代码(很巧妙). #include<iostream> #include<stdio.h> #include<queue& ...

  5. HNOI2008 明明的烦恼 （purfer序列 + 组合数学）

    传送门 这道题题意描述很清楚,不过我自己做的时候确实是一头雾水……又看了题解,发现要用到一个新知识,叫purfer序列. 我们来简单说一下什么是purfer序列.它可以被看作一种树的表现形式.一棵含有 ...

  6. 标准WPS框架下的空间信息处理服务部署方法

    笔者第一篇博客里面曾介绍过将专题图制作功能发布为WPS,但随着后面的研究,才发现那时候发布的不是真正WPS框架下的服务,而只是通过Servlet将其发布为可调用的网络服务,所以今天再具体介绍一下真正的 ...

  7. J20170426-hm

    ジェネリクス Generics 泛型 バルーン balloon 气球 アングルブラケット Angle bracket 尖括号 プレースホルダ Placeholder 占位符

  8. 洛谷 - P2152 - SuperGCD - 高精度

    https://www.luogu.org/problemnew/show/P2152 一开始不知道Java可以有gcd,手写了个辗转相除法. 发现Number类在参数传递中传的并非是引用! 最主要要 ...

  9. python 类装饰器

    class Test(): def __init__(self, func): print('装饰器1') self.__func = func def __call__(self): print(' ...

  10. svn项目添加到tomcat后，tomcat无法打开问题解决

    1,tomcat版本更改 由7.0.81更改至8.0.47(8.5.23在添加至eclipse后版本不符无法使用) 更改版本后记得修改Server Locations-->双击服务器--> ...