One 、 Preface
While browsing some image websites , I often see a lot of beautiful star maps , such as , The picture below . In fact, the effect of this star image , It can also be done through html+css Style and js The way to achieve . Today, I’ll show you how to achieve the effect of star map .
Two 、 Project preparation
Software ：Dreamweaver
3、 … and 、 Goals achieved
Each refresh produces a random number of stars . Display on canvas .
Four 、 Project implementation
1. establish canvas canvas
<body>
<canvas id='canvas'></canvas>
</body>
2. add to css style .
to canva Canvas with borders , Convenient observation .
<style type="text/css">
canvas{
border:2px solid #f00;
}
</style>
3. add to js style
3.1 Set up canvas Canvas size , Definition requires variables .
<script type="text/javascript">
var _canvas=document.getElementById("canvas")
_canvas.width=500;
_canvas.height=500;
var r,g ,b,a;
</script>
3.2 Generate random circles .
for (var j = 0; j < 150; j++) {
arc.x=Math.floor(Math.random()*_canvas.width);
arc.y=Math.floor(Math.random()*_canvas.height);
arc.r=Math.floor(Math.random()*31+10);
r=Math.ceil(Math.random()*256);
g=Math.ceil(Math.random()*256);
b=Math.ceil(Math.random()*256);
a=Math.random();
darw();
}
3.3 Definition draw() Method , By drawing the star formula , Turn a circle into a star for The cycle produces stars with random positions .
How to draw stars ？（ Formula analysis ）（ Picture source: Baidu ）
Stars have inscribed circles and circumscribed circles , The angle between each two points is fixed , So you can get the coordinates of each point of the star , Draw the stars .
/* Random stars */
for (var i = 0; i < 5; i++) {
_ctx.lineTo(Math.cos((18+72*i)/180*Math.PI)*arc.r+arc.x, -Math.sin((18+72*i)/180*Math.PI)*arc.r+arc.y);
_ctx.lineTo(Math.cos((54+72*i)/180*Math.PI)*arc.r/2+arc.x, -Math.sin((54+72*i)/180*Math.PI)*arc.r/2+arc.y);
}
3.4 Randomly generate color .
Math Functions are generated randomly 0-225 Of RGB value .
/* Random color */
_ctx.fillStyle="rgba(" + r + "," + g + "," + b + "," + a + ")";
_ctx.fill();
_ctx.strokeStyle="rgba(" + r + "," + g + "," + b + "," + a + ")";
_ctx.stroke();
}
3.5. call draw() Method implementation function .
darw();
5、 … and 、 Effect display
1、 Click on f12 Run to browser
2、 Every time you refresh the page , Randomly produce different stars and random colors .
6、 … and 、 summary
-
This project uses canvas canvas , Achieve the effect of star map , And in the use of javascript When you have a star effect , Some difficulties encountered are analyzed and solutions are provided .
-
Welcome to try , Sometimes it’s easy to see someone else do it , But when it comes to doing it yourself , There will always be all kinds of problems , Don’t hold your eyes high or your hands low , Do it frequently , Can understand more deeply .
-
The code is simple , Hope to inspire you .
Want to learn more about the front end 、Python Reptiles 、 Big data and other computer knowledge , Please go to ：http://pdcfighting.com/ Want to learn more Python Web crawler and data mining knowledge , Go to a professional website ：http://pdcfighting.com/