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