html5基于canvas画布里面圆球弹跳动画效果

 首页 > 网页特效 > 其他特效 > html5基于canvas画布里面圆球弹跳动画效果

html5基于canvas画布里面圆球弹跳动画效果

 2019-01-09  335  收藏  0 赞一个  0 真差劲  0 去评论

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
	margin: 0px;
}
</style>
<script type="text/javascript">
var imageCanvas;
var maskCanvas;
var imageContext;
var maskContext;
var frameCount = 0;
var nextFrames = 0;
var maskX = 225;
var maskY = 160;
var maskSpeedX = 0;
var maskSpeedY = 0;
var MASK_R = 75;
var CANVAS_WIDTH = 500;
var CANVAS_HEIGHT = 320;
//ߵ:http://caochunhui.taobao.com
function pageInit() {
	imageCanvas = document.createElement("canvas");
	imageCanvas.width = CANVAS_WIDTH;
	imageCanvas.height = CANVAS_HEIGHT;
	document.body.appendChild(imageCanvas);
	imageCanvas.style.position = "absolute";
	imageContext = imageCanvas.getContext("2d");
	var img = new Image();
	img.onload = function () {
		imageContext.drawImage(img, 0, 0);
	}
	img.src = "mn.jpg";
	maskCanvas = document.createElement("canvas");
	maskCanvas.width = CANVAS_WIDTH;
	maskCanvas.height = CANVAS_HEIGHT;
	document.body.appendChild(maskCanvas);
	maskCanvas.style.position = "absolute";
	maskContext = maskCanvas.getContext("2d");
	resetSpeed();
	setInterval(moveMask, 20);
}
function resetSpeed() {
	maskSpeedX = Math.random() * 10 - 5;
	maskSpeedY = Math.random() * 10 - 5;
	resetNextFrames();
}
function resetNextFrames() {
	nextFrames = Math.random() * 125 + 25;
}
function moveMask() {
	maskContext.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
	maskContext.globalCompositeOperation = "source-over";
	maskContext.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
	maskContext.globalCompositeOperation = "destination-out";
	maskContext.beginPath();
	maskContext.arc(maskX, maskY, MASK_R, 0, Math.PI * 2, true);
	maskContext.fill();
	maskX += maskSpeedX;
	maskY += maskSpeedY;
	if (maskX >= CANVAS_WIDTH - MASK_R) {
		maskSpeedX = -Math.abs(maskSpeedX);
	}
	if (maskX <= MASK_R) {
		maskSpeedX = Math.abs(maskSpeedX);
	}
	if (maskY >= CANVAS_HEIGHT - MASK_R) {
		maskSpeedY = -Math.abs(maskSpeedY);
	}
	if (maskY <= MASK_R) {
		maskSpeedY = Math.abs(maskSpeedY);
	}

	frameCount++;
	if (frameCount > nextFrames) {
		frameCount = 0;
		resetSpeed();
	}
}
</script>
</head>
<body onLoad="pageInit();">

</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

这是一款基于html5的canvas实现的画布里面圆球弹跳动画效果源码，画布中的白色小球出现四处碰撞的效果，非常逼真。且代码简单易懂。是一款非常优秀的特效源码。建议采用支持HTML5的火狐或谷歌等浏览器预览本实例源码。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行