效果如图：

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. (深入理解计算机系统) bss段，data段、text段、堆(heap)和栈(stack)

    bss段: bss段(bss segment)通常是指用来存放程序中未初始化的全局变量的一块内存区域. bss是英文Block Started by Symbol的简称. bss段属于静态内存分配. ...

  2. 异常、Throwable、finally、File类(十九)

    1.异常的概述和分类 * A:异常的概述 * 异常就是Java程序在运行过程中出现的错误.* B:异常的分类 * 通过API查看Throwable * Error * 服务器宕机,数据库崩溃等 * E ...

  3. 每次rand出来都是41？说好的随机数呢？！

    rand()函数是C++标准函数库提供的随机数生成器,生成0-RAND_MAX之间的一个"伪随机"整数,理论上可以产生的最大数值为2^16-1,即32767. rand()函数不接 ...

  4. Struts2访问Servlet API的几种方式

    struts2提供了三种方式访问servlet API:大致分为两类 1. ActionContext:  public static ActionContext getContext() :获得当前 ...

  5. bzoj 2836 魔法树 —— 树链剖分

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2836 树链剖分裸题: 写码五分钟,调码两小时,RE不断,狂交二十五遍,终于找到一处小细节—— ...

  6. 开启sqlplus中执行计划

    在sqlplus中我们一般用Autotrace来查看执行计划,从而对于一些语句执行过程分析,开展优化工作.这里就演示一下如何将autotrace权限授予给普通的用户,以scott用户为例(set au ...

  7. 【转】[钉钉通知系列]Jenkins发布后自动通知

    转载请注明出处:https://www.cnblogs.com/jianxuanbing/p/7211006.html 阅读目录 一.前言 二.使用钉钉推送的优势 三.配置 一.前言 最近使用Jenk ...

  8. const常量

    1.不能给常量赋值 ; a=; 编译器报错:“a”: 不能给常量赋值

  9. 6-9 Haar+adaboost人脸识别

    我们重点分析了Haar特征的概念以及如何计算Haar特征,并介绍了Haar+Adaboost分类器它们的组合以及Adaboost分类器如何使用和训练.这节课我们将通过代码来实现一下Haar+Adabo ...

  10. J2ee的SSM和SSH的小结

    1.介绍SSM框架: SSM是指由Spring.SpringMVC.Mybatis三个开源框架整合的开发框架. a).Spring是一个轻量级的容器框架,核心是控制反转(IoC)和面向切面(AOP). ...