效果如图：

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. ES6的相关新属性

    ES6  引入了类这个概念. 1.class……extends es6中的class与es5 中的function差不多: class Student extends People , student ...

  2. [推荐]Silverlight 2 开发者海报

    从Brad Abrams的Blog上看到了一张Silverlight 2开发者海报,非常酷,拿出来与大家分享. [JPG版本 5.8MB] [PNG版本 6.5MB] [TIF版本 19.9 MB] ...

  3. HDU 1711（KMP）字符串匹配

    链接  HDU 1711 Number Sequence KMP 算法 我以自己理解写的,写的不对,不明白的地方海王子出来,一起共同学习: 字符串匹配 就是KMP,一般思想,用一个for循环找开头   ...

  4. macbook pro 配置jdk,maven环境变量

    https://blog.csdn.net/vvv_110/article/details/72897142(1)下载jdk安装包,进行安装,maven安装包,进行解压 (2)改写环境变量的配置文件/ ...

  5. CQOI2013 新数独

    传送门 这道题也是很暴力的搜索啊…… 因为数独一开始全是空的,只有许许多多的大小限制条件,那也没必要纠结从哪开始搜索了,直接暴力搜索之后判断一下是否合法. 这题最恶心的是读入.现学了一招判断点在哪个块 ...

  6. 【转】java对象——new对象的理解

    学了好长时间的java对于java中的对象一直没有理清楚,今天楼主对java中的对象进行了整理,希望对大家有帮助. 理解和使用java中的对象,我们首先了解一下构造方法与对象的创建.  类是面向对象语 ...

  7. margin和padidng的使用

    何时应当使用margin:需要在border外侧添加空白时.空白处不需要背景(色)时.上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的margin,将得到20px的空白. 何时 ...

  8. 图片加水印文字，logo。生成缩略图

    简单JSP代码 图片加水银文字 try { String path = request.getRealPath("images\\01.jpg"); out.print(path) ...

  9. hdoj5563（简单几何）

    笑死我了,居然一遍就过了. 题意:给你5个点,让你判断能否组成一个五角星: 思路: 利用对称性,应该有很多种方法.弱打的很麻烦.但是那个两点式公式去判断另外一个点是否在一条直线上的那个判断,还是蛮喜欢 ...

  10. HDOJ4857【拓扑排序】

    首先 CLJ ORZ 这道题做了两次,第一次瞎搞... 第二次,好吧,骄傲地说水过... 题意:不说了: 思路: 题目默认是小的在前面,那么就是反向建图,每次排序拿大的出来: 第一次做的时候,我记得我 ...