JavaScript利用canvas实现星空效果
作者：潘小七
前言
由于最近用了挺多Echarts的，所以突然想学习学习它的底层原理Canvas。Canvas对于我们前端来说是一个非常强大的工具，它可以实现各种复杂的图形和动画效果，我们如果能够熟练掌握它，我们就可以做很多炫酷的效果。
Canvas 介绍
首先我们来介绍介绍Canvans，Canvas是 HTML5提供的一个绘图API，它允许通过JavaScript和HTML元素创建和操作图形。Canvas提供的是一个矩形画布，我们可以在上面绘制各种图形、动画与交互效果。
功能
上面了解了Canvas是什么之后, 我们再来和大家展开说说Canvas 一些主要功能：
- 画布：
Canvas提供了一个矩形的画布区域, 我们可以通过HTML中的<canvas>标签来创建并通过设置画布的宽高来确定绘图区域的大小。 - 绘画API：
Canvas提供了丰富的绘图API，包括绘制路径、直线、曲线、矩形、圆形、文本等。 我们使用这些API来创建各种图形，并自定义样式、颜色、透明度等属性。 - 动画：
Canvas可以与JavaScript的动画函数结合使用，实现动态的图形效果。通过在每一帧中更新画布上的内容，能创建平滑的动画效果。 - 图像处理：
Canvas可以加载和绘制图像。我们可以使用Canvas的API对图像进行裁剪、缩放、旋转等操作，从而实现图像处理的功能。 - 事件处理：
Canvas支持鼠标和触摸事件的处理，我们可以通过监听这些事件来实现交互效果，例如点击、拖拽、缩放等等。
注意：Canvas 绘制的内容是即时生成的，它不会被浏览器缓存，所以每次页面加载Canvas都需要重新绘制，所以我们在使用时需要考虑性能问题。
星空
在介绍完Canvas之后，我们再来用Canvas和 JS结合，实现一片星空的效果。
第一步，我们先创建好html 结构，代码如下：
<div class="landscape">
</div>
<canvas id="canvas"></canvas>
<div class="filter"></div>
<script src="./round_item.js"></script>
现在是没有效果的，我们在给它加上css代码，将其美化，同时我们再在css上加一些动画效果，完整代码如下：
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background: linear-gradient(to bottom, #000 0%, #5788fe 100%);
}
.landscape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(./star/xkbg.png);
background-repeat: repeat-x;
background-size: 1000px 250px;
background-position: center bottom;
}
.filter{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: #fa7575;
animation: colorChange 30s ease-in infinite;
}
/* 渐变动画*/
@keyframes colorChange {
0%,100%{
opacity: 0;
}
50%{
opacity: 0.7;
}
}
这时候，我们看到的效果是这样的：
这效果好像只有黄昏的颜色变化，少了星空。那这最后一步，就该我们Canvas上场了，我们要用Canvas画出来一片星空，并配合css的颜色变化，实现一个夜晚到清晨的感觉。
我们 js 代码这样写：
//创建星星的函数
function RoundItem(index, x, y, ctx) {
this.index = index
this.x = x
this.y = y
this.ctx = ctx
this.r = Math.random() * 2 + 1
this.color = 'rgba(255,255,255,1)'
}
// 绘制
RoundItem.prototype.draw = function () {
this.ctx.fillStyle = this.color //指定颜色
this.ctx.beginPath() // 开始绘制
this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false) // 绘制圆形
this.ctx.closePath() // 结束绘制
this.ctx.fill() //填充形状
}
//移动
RoundItem.prototype.move = function () {
this.y -= 0.5
this.draw()
}
let canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
round = [],
initRoundPopulation = 200; //星星的个数
const WIDTH = document.documentElement.clientWidth,
HEIGHT = document.documentElement.clientHeight;
canvas.width = WIDTH
canvas.height = HEIGHT
init()
// setInterval(animate, 1700)
animate()
function init() {
for (var i = 0; i < initRoundPopulation; i++) {
round[i] = new RoundItem(i, Math.random() * WIDTH, Math.random() * HEIGHT, ctx)
round[i].draw()
}
}
function animate() {
ctx.clearRect(0, 0, WIDTH, HEIGHT) //清除画布
for (let star of round) {
star.move()
}
requestAnimationFrame(animate) //通过刷新帧数来调用函数
}
将上述代码添加上之后，我们也就完成星星的绘制并添加到了页面上，最终的效果如下：
到这里，我们就用canvas 画出了一片美丽的星空。同时我们也看到了canvas的强大功能，感兴趣的小伙伴可以深入的了解它更多的用法哦。
以上就是JavaScript利用canvas实现星空效果的详细内容，更多关于JavaScript canvas星空效果的资料请关注脚本之家其它相关文章！