效果如图：

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. POJ1511 Invitation Cards —— 最短路spfa

    题目链接:http://poj.org/problem?id=1511 Invitation Cards Time Limit: 8000MS   Memory Limit: 262144K Tota ...

  2. Android 查询 添加 修改 删除通讯录联系人示例

    1.AndroidManifest.xml中添加权限 <uses-permission android:name="android.permission.READ_CONTACTS&q ...

  3. python split space

    发现自己写python的空格split还挺多坎的,尤其是最后一个是空格的情形: def split(s): i = 0 ans = [] while i < len(s): start = i ...

  4. DFS Used%: NaN%问题

    一.问题描述: [root@master sbin]# hdfs dfsadmin -report Configured Capacity: 0 (0 B) Present Capacity: 0 ( ...

  5. Python里的一些注释规范

    写代码注释是一件很重要的事情,如果你写的一段函数给别人调用那么往往都需要配上一些基本的注释.写好代码可以让别人容易阅读你的代码.试想一 下:如果你在github上面找到一段你想要的代码,这段代码有20 ...

  6. 【Codeforces 947B】 Producting Snow

    [题目链接] 点击打开链接 [算法] 前缀和 + 堆 [代码] #include<bits/stdc++.h> using namespace std; typedef long long ...

  7. 从MyEclipse到IntelliJ IDEA

    如何做到全键盘操作呢? 1.自定义快捷键实现全屏操作 你可以设置自定义快捷键进入全屏操作,并实现各个窗口之间的切换.这样,你就可以告别小窗口的时代,体验全屏显示的效果了!(相信有过多年开发经验的你一定 ...

  8. Ubuntu 16.04 如何使用Samba服务器

    对于Windows与Ubuntu之间的数据传输,我们习惯于使用FTP工具,不过还是有学员问到samba服务器搭建和使用的问题,这便是本文的来由. Ubuntu版本:ARM裸机1期加强版配套的Ubunt ...

  9. py-day8-socket网络编程

    本节内容 Socket介绍 Socket参数介绍 基本Socket实例 Socket实现多连接处理 通过Socket实现简单SSH 通过Socket实现文件传送 作业:开发一个支持多用户在线的FTP程 ...

  10. eclipse中更改配置使得switch语句不出错

    分别点击: windows---preference--->java---->compiler--->error/waring---->potential programmin ...