html5 星空,用canvas实现简单的星空效果

用canvas实现简单的星空效果

因为日常被人说博客没文章所以就算只是写了个很简单的小星星也努力的把过程拼凑出来写个博客辣！(。

Step.0

涉及到的所有的代码都放在了我的github上

首先看一下最终的效果图，可以参考我的博客首页或者下面这张图

image

Step.1

第一步当然是用canvas画个小星星啦✨

for (let i = 0; i < 5; i++) {

content.lineTo(Math.cos((18+j*72)/180*Math.PI)*R+x,

-Math.sin((18+j*72)/180*Math.PI)*R+y)

content.lineTo(Math.cos((54+j*72)/180*Math.PI)*r+x,

-Math.sin((54+j*72)/180*Math.PI)*r+y)

}

画星星实际上是需要十个顶点，一个是外圈的五个顶点，用R指定，一个是内圈的五个顶点，用r指定，x和y则是圆心坐标

Step.2

确定整个星空的组成部分

const setting = {

width: screen.width,

height: screen.height,

canvas: null,

content: null,

maxStar: 100,