利用canvas绘制js动态粒子喷射，可以表白用

最新推荐文章于 2021-06-05 10:08:49 发布

weixin_45247356

最新推荐文章于 2021-06-05 10:08:49 发布

阅读量375

点赞数 1

文章标签：利用canvas绘制js动态粒子喷射表白用

本文链接：https://blog.csdn.net/weixin_45247356/article/details/103269739

版权

本文介绍如何利用HTML5的canvas元素和JavaScript编写代码，创建一个动态粒子喷射效果，特别适合用于表白场景。首先设置canvas画布，然后获取网页尺寸，接着在画布上绘制文字并居中，通过速度控制粒子方向，最后应用定时器实现动画效果，全部采用面向对象编程方式实现。

摘要由CSDN通过智能技术生成

在这里插入图片描述

#思路 canvas是js代码不消耗CPU 只是一个标签的大小例如：用于直播发送弹幕比较多他是一个画布
#做法 1.先画一个canvas画布 2.利用原始的js代码获取网页的宽高 3.画出一个字 4.把字位移到中心位置 5.别忘了speed控制方向 6.加上定时器全程是用面向对象编写
#代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#canvas{
    
			background-color: black;
			display: block; 
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script