前言

由于最近用了挺多Echarts的，所以突然想学习学习它的底层原理Canvas。Canvas对于我们前端来说是一个非常强大的工具，它可以实现各种复杂的图形和动画效果，我们如果能够熟练掌握它，我们就可以做很多炫酷的效果。

Canvas 介绍

首先我们来介绍介绍Canvans，Canvas是 HTML5提供的一个绘图API，它允许通过JavaScript和HTML元素创建和操作图形。Canvas提供的是一个矩形画布，我们可以在上面绘制各种图形、动画与交互效果。

功能

上面了解了Canvas是什么之后, 我们再来和大家展开说说Canvas 一些主要功能：

1. 
   
2. 画布：Canvas提供了一个矩形的画布区域, 我们可以通过HTML中的<canvas>标签来创建并通过设置画布的宽高来确定绘图区域的大小。
   
3. 绘画API：Canvas提供了丰富的绘图API，包括绘制路径、直线、曲线、矩形、圆形、文本等。 我们使用这些API来创建各种图形，并自定义样式、颜色、透明度等属性。
   
4. 动画：Canvas可以与JavaScript的动画函数结合使用，实现动态的图形效果。通过在每一帧中更新画布上的内容，能创建平滑的动画效果。
   
5. 图像处理：Canvas可以加载和绘制图像。我们可以使用Canvas的API对图像进行裁剪、缩放、旋转等操作，从而实现图像处理的功能。
   
6. 事件处理：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的强大功能，感兴趣的小伙伴可以深入的了解它更多的用法哦。