效果如图：

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. NEU 1683: H-Index

    题目描述 Given an array of citations (each citation is a non-negative integer) of a researcher, write a ...

  2. Why you shouldn’t connect your mobile application to a database

    BY CRAIG CHAPMAN · PUBLISHED 2015-07-02 · UPDATED 2015-07-02   Working at Embarcadero, I frequently ...

  3. I2S总线协议理解

    I2S总线 Inter IC Sound总线又称集成电路内置音频总线. I2S对数字音频设备之间的音频数据传输而制定的一种总线标准. 采用了沿独立的导线传输时钟与数据信号的设计,通过将数据和时钟信号分 ...

  4. 西门子PLC存储器、地址区

    S7-1500 CPU的存储器 1.内部集成的存储器:工作存储器,保持性存储器,系统存储器 2.外插的SIMATIC存储卡:装载存储器去 装载存储器:断电信息不丢失,主要存储项目中程序块,数据块,工艺 ...

  5. SPOJ：House Fence（分治&DP）

    "Holiday is coming, holiday is coming, hurray hurray!" shouts Joke in the last day of his ...

  6. 高性能框架gevent和gunicorn在web上的应用及性能测试

    WSGI Server有哪些: 比如 Flask,webpy,Django.CherryPy 都带着 WSGI server .当然性能都不好,自带的web server 更多的是测试用途, 发布时则 ...

  7. 使用Navicat连接MySQL出现1251错误

    问题:navicat连接mysql时报错:1251-Client does not support authentication protocol requested by server; consi ...

  8. linux--安装phpcurl扩展

    在UBUNTU中直接用APT包管理工具安装: apt-get install curl libcurl3 libcurl3-dev php5-curl 安装好后重启Apache服务器就行了,如果还是不 ...

  9. 微信小程序 WXML、WXSS 和JS介绍及详解

    前几天折腾了下.然后列出一些实验结果,供大家参考. 百牛信息技术bainiu.ltd整理发布于博客园 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML( ...

  10. Bootstrap-CSS：表格

    ylbtech-Bootstrap-CSS:表格 1.返回顶部 1. Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: ...