• 周一. 12月 11th, 2023

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签
Java

Hand in hand teaching you how to make random star effect picture with JavaScript

由[db:作者]

1月 4, 2022

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

  1. 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 .

  2. 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 .

  3. 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/

[db:作者]

相关文章

Java
Selenium2学习（十七）– js处理日历控件（修改readonly属性）
3月 2, 2023 [db:作者]
Java
node.js 针对不同的请求路径(url) 做出不同的响应
3月 2, 2023 [db:作者]
Java
webpack.config.js配置遇到Error: Cannot find module ‘@babel/core’&&Cannot find module ‘@babel/plugin-transform-react-jsx’ 问题
3月 2, 2023 [db:作者]
《Hand in hand teaching you how to make random star effect picture with JavaScript》有38个想法

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

You missed

python
python
python
python