大佬教程收集整理的这篇文章主要介绍了HTML5的Canvas实现小圆点在屏幕内跑动，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<Meta charset="utf-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title id="title">Hover</title>
<!-- <link href="css/css.css" rel="stylesheet"> -->
<style>
/*@import url(http://fonts.googleapis.com/css?family=Righteous);*/
body {
width: 100%;
margin: 0;
overflow: hidden;
cursor: move;
BACkground: black;
height: 100%;
}
</style>
</head>
<body>
<canvas id='canvas'></canvas>
<script>
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitrequestAnimationFrame ||
window.mozrequestAnimationFrame ||
window.orequestAnimationFrame ||
window.msrequestAnimationFrame ||
function(callBACk) {
window.setTimeout(callBACk,1000 / 60);
};
}) ();
c = document.getElementById('canvas'),$ = c.getContext('2d');
//设定画布的宽高
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
//喷射点坐标
sx = w / 2;
sy = h / 2;
//放置圆点对象的数组
var circles = [];
//鼠标的位置
var mouse = {
x: 0,y: 0
};
//初始速度
var vel = 10;
//创建新的圆点并加入数组
function createCircle() {
circles.push({
x: sx,y: sy,v: {
x: vel * Math.random(),y: vel * Math.random()
}
});
}
//清除画布内容
function clear() {
$.fillStyle = 'black';
$.fillRect(0,w,h);
}
//画圆点
function drawCircle() {
clear();
for (var i in circles) {
if (circles[i].x < 5 || w - circles[i].x < 5) {
circles[i].v.x *= -1;
circles[i].v.y -= 1;
}
if (circles[i].y < 5 || h - circles[i].y < 5) {
circles[i].v.y *= -1;
circles[i].v.x -= 1;
}
circles[i].x += circles[i].v.x;
circles[i].y += circles[i].v.y;
$.fillStyle = 'red';
$.beginPath();
$.arc(circles[i].x,circles[i].y,20,Math.PI * 2,truE);
$.closePath();
$.fill();
}
}
//设置动画的回调函数，使动画持续播放
function updateCanvas() {
requestAnimationFrame(updateCanvas),drawCircle();
}
window.addEventListener('mousedown',createCirclE);
//页面载入后自行产生一个圆点
createCircle();
//触发循环回调，动画即可持续进行
updateCanvas();
</script>
</body>
</html>
以上是大佬教程为你收集整理的HTML5的Canvas实现小圆点在屏幕内跑动全部内容，希望文章能够帮你解决HTML5的Canvas实现小圆点在屏幕内跑动所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。