canvas笔记-绘制运动小球（落地弹起，遇边回弹）

程序运行截图如下：

就是这个球，遇到底端及左右两边都可以弹

源码如下：

canvas4.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="display: block; margin: 50px auto;"></canvas><script src="js/test4.js"></script>
</body>
</html>

test4.js

;const WIDTH = 1024;
const HEIGHT = 768;
const RADIUS = 15;let ball = {x: WIDTH / 2,y: 30,g: 1.5 + Math.random(),vx: Math.pow(-1, Math.ceil(Math.random() * 10)) * 4,vy: -5,color: '#CC0000'
};window.onload = function(){let canvas = document.getElementById("canvas");let context = canvas.getContext("2d");contextBuffer.width = WIDTH;contextBuffer.height = HEIGHT;canvas.width = WIDTH;canvas.height = HEIGHT;render(context, contextTmp);setInterval(function(){render(context, contextTmp);update();},50);
}function update(){ball.x += ball.vx;ball.y += ball.vy;ball.vy += ball.g;//最顶端不放if(ball.y > HEIGHT - RADIUS){   //最低端ball.y = HEIGHT - RADIUS;ball.vy = -ball.vy * 0.75;}if(ball.x < 0 + RADIUS){    //最左端ball.x = RADIUS;ball.y = HEIGHT - RADIUS;ball.vy = -Math.random() * 100 + 30;ball.vx = Math.random() * 100 + 30;}if((WIDTH - RADIUS) - ball.x < 0){    //最右端ball.x = WIDTH - RADIUS;ball.y = HEIGHT - RADIUS;ball.vy = -Math.random() * 100 + 30;ball.vx = -Math.random() * 100 + 30;}
}function render(cxt){cxt.clearRect(0, 0, WIDTH, HEIGHT);cxt.fillStyle = ball.color;cxt.beginPath();cxt.arc(ball.x, ball.y, 15, 0, 2 * Math.PI);cxt.closePath();cxt.fill();;
}

这里只提示几个地方，一个是clearRect()可以清空指定位置的画板。

ball里面的vx指水平方向的速度，vy指垂直方向的速度，g值加速度。

canvas笔记-绘制运动小球（落地弹起，遇边回弹）相关推荐

ae制作小球轨迹运动_利用Ae制作出自由落地运动小球的详细步骤
各位知道在Ae中如何制作出自由落地运动小球呢?不太会操作的用户可以去下文学习下利用Ae制作出自由落地运动小球的详细步骤. 我们先准备好小球图片素材,背景颜色为黑色.导入素材,新建合成.将素材拖拽的合成 ...
html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
arcgis飞行轨迹动画_高德地图，百度地图，arcgis地图利用canvas动画绘制圆形扩散、运动轨迹等动态效果...
本文转发自热爱前端知识的博客原博客地址介绍在ECharts中看到过这种圆形扩散效果,类似css3,刚好项目中想把它用上,but我又不想引入整个echart.js文件,更重要的是想弄明白它的原 ...
Android 如何将Canvas上绘制的内容保存成本地图片
效果如下图所示保存在sd卡上的文件为手机上显示效果为: 1>>在Manifest文件中增加相应权限 <uses-p ...
html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
canvas笔记-clip裁剪函数的使用及探照灯实例
在canvas中有clip函数,也就是裁剪,从原始画布中剪切任意形状和尺寸. 如下例子: <!DOCTYPE html> <html lang="en"> ...
Android中使用SurfaceView和Canvas来绘制动画
事实上每一个View中都有Canvas能够用来绘制动画.仅仅须要在这个View中重载onDraw()方法就能够,可是SurfaceView类是一个专门用来制动动画的类. Canvas(中文叫做&quo ...
openlayers3线段添加闪烁_openLayers 4 canvas图例绘制，canvas循环添加图片，解决图片闪烁问题...
一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

canvas笔记-绘制运动小球（落地弹起，遇边回弹）

canvas笔记-绘制运动小球（落地弹起，遇边回弹）相关推荐

最新文章

热门文章