Canvas 简单又看好的星空特效

最新推荐文章于 2024-05-29 17:25:33 发布

清静清源

最新推荐文章于 2024-05-29 17:25:33 发布

阅读量1.6k

点赞数 1

分类专栏： javascript Web 前端基础

本文链接：https://blog.csdn.net/qq_35068659/article/details/113808224

版权

Canvas 基础应用

html code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>canvas</title>
		<style>
			body {
				margin: 0px;
				padding: 0px;
			}
			#circle_canvas {
				background-image: linear-gradient(to bottom, #000, 
					MidnightBlue, deepskyblue, MidnightBlue, #000);
			}
		</style>
	</head>
	<body>
		<canvas id="circle_canvas"></canvas>
		<script src="js/circle_canvas.js"></script>
	</body>
</html>

JavaScript code

/* 2021/2/14
 * 功能：星空特效
 */

var cirle_canvas = document.getElementById('circle_canvas');
var cirle_ctx = cirle_canvas.getContext('2d');

cirle_canvas.width = window.innerWidth;
cirle_canvas.height = window.innerHeight * 0.4;

var width = cirle_canvas.width;
var heigh