js 爱心

最新推荐文章于 2024-08-27 21:01:56 发布

心匙

最新推荐文章于 2024-08-27 21:01:56 发布

阅读量25

点赞数

文章标签： javascript Powered by 金山文档

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_53386534/article/details/128790731

版权

	<script src="https://underscorejs.net/underscore.js"></script>
	</head>
	<body>
	<canvas id="canvas"></canvas>
	<script>
	var canvas=document.getElementById("canvas");
	var ctx=canvas.getContext("2d");
	canvas.width=1500;
	canvas.height=1000;
	canvas.style.backgroundColor="black";
	class Ball{
	constructor(x,y,color){
	this.x=x;
	this.y=y;
	this.color=color;
	this.r=80;
	}
	render(){
	ctx.beginPath();
	var start = 0;
	for (var i = 0; i < 500; i++) {
	start += Math.PI * 2 / 500;
	var end = start + Math.PI * 2 / 500;
	var r = this.r * (1 + Math.sin(start));
	ctx.arc(this.x, this.y, r, start, end, false);
	}
	ctx.fillStyle = this.color;
	ctx.fill();
	}
	}
	class moveBall extends Ball{
	constructor(x,y,color){
	super(x,y,color);
	this.dx=_.random(-5,5);
	this.dy=_.random(-5,50);
	this.dr=_.random(3,5);

	}
	update(){
	this.x+=this.dx;
	this.y+=this.dy;
	this.r-=this.dr;
	if(this.r<0)
	this.r=0;
	}
	}
	var ballArr=[];
	var colorArr=["red","orange","yellow"];
	var a=true;
	canvas.addEventListener("mousemove",function(e){
	if(a){
	a=false;
	var timer=setTimeout(()=>{a=true},100);
	e=e\|\|event;
	ballArr.push(new moveBall(e.offsetX,e.offsetY,colorArr[_.random(0,colorArr.length-1)]));
	}
	});
	setInterval(function() {
	ctx.clearRect(0,0,canvas.width,canvas.height);
	for(var i=0;i<ballArr.length;i++)
	{
	ballArr[i].render();
	ballArr[i].update();
	}
	}, 50);
	</script>
	</body>
	</html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 爱心

js 爱心
复制链接

扫一扫

心匙 CSDN认证博客专家 CSDN认证企业博客

码龄4年

15: 原创

134万+: 周排名

202万+: 总排名

2982: 访问

: 等级

152: 积分

3: 粉丝

1: 获赞

2: 评论

2: 收藏

私信

关注

热门文章

最新评论

linux网络配通
CSDN-Ada助手: 恭喜用户写了这么一篇有用的博客，对于想学习Linux网络配置的人来说，这篇文章一定会很有帮助。希望用户能够继续保持创作的热情，分享更多实用的技术经验。下一步的建议是，可以考虑扩大主题范围，涉及更多Linux相关的话题，让读者们能够更全面地了解Linux系统。再次感谢用户的分享。 CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply8 看奖励名单。
linux复习资料
CSDN-Ada助手: 非常感谢您的分享！学习Linux确实需要不断地复习和积累。您的博客对于需要复习资料的人们来说十分有用。希望您能够继续坚持创作，为大家带来更多有价值的内容。下一步，建议您可以分享一些Linux入门学习的经验和技巧，让更多的人受益。再次感谢您的付出！ CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply9 看奖励名单。
鸿蒙listitem和tabcontent+页面传参
CSDN-Ada助手: 恭喜您写出了第7篇博客！阅读您的文章，我对鸿蒙listitem和tabcontent+页面传参有了更深入的了解，非常感谢您的分享。希望您能继续保持创作的热情和耐心，为我们带来更多有价值的内容。下一步，可以考虑写一些实战经验，或是分享一些实用的技巧，让读者们更加容易上手。期待您的下一篇文章！ CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply7 看奖励名单。

大家在看

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。