效果如图：

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. POJ3080 Blue Jeans —— 暴力枚举 + KMP / strstr()

    题目链接:https://vjudge.net/problem/POJ-3080 Blue Jeans Time Limit: 1000MS   Memory Limit: 65536K Total ...

  2. chrome——关于chrome浏览器的奇葩问题

    前言 说下自己遇到的关于chrome的奇葩问题~ 问题 目前就一个,还是刚才才遇到的~ 消息通知 客户的chrome浏览器死活没有通知,检查后发现通知权限未开启, 通知权限开启后,还是没有提示,最后排 ...

  3. vue开发：移动端图片上传

    因为最近遇到个移动端上传头像的需求,上传到后台的数据是base64位,其中为了提高用户体验,把比较大的图片用canvas进行压缩之后再进行上传.在移动端调用拍照功能时,会发生图片旋转,为了解决这个问题 ...

  4. springboot在eclipse实现热部署

    eclipse使用spring-tool-suite插件创建springboot项目,项目创建完成后. 选中项目,右键 Spring Tools  --> Add Boot Devtools 点 ...

  5. iOS 生成随机数

    arc4random 1.获取一个随机整数范围在:[0,100)包括0,不包括100 int x = arc4random() % 100; 2.  获取一个随机数范围在:[500,1000],包括5 ...

  6. I.MX6 Android /data 目录内容

    /**************************************************************************** * I.MX6 Android /data ...

  7. CodeForces-380C：Sereja and Brackets(线段树与括号序列)

    Sereja has a bracket sequence s1, s2, ..., sn, or, in other words, a string s of length n, consistin ...

  8. 【前端】CentOS 7 系列教程之二： 安装 git 最新版

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/linux_2.html 这一篇我们来安装git高版本. 卸载yum安装的旧版本 yum remove git 安装 ...

  9. 关于spring boot在启动的时候报错: java.lang.Error: generate operation swagger failed, xxx.xxx.xxx

    Error starting ApplicationContext. To display the auto-configuration report re-run your application ...

  10. mtr和nmap命令

    mtr mtr是一个网络连通性判断工具,它可以结合ping nslookup tracert 来判断网络的相关特性. [root@10.10.90.97 ~]# mtr -h usage: mtr [ ...