Create animation and make your website more beautiful.
When we developed a normal website, we used to use some HTML tags such as div , span , and ul . But those tags have limit abilities, div are just a rectangle container, ul are just a list container, they can not be used to create animation and more custom styles.
If you want to draw a monkey or add a random particle effect on your webpage, what should you do?
The Canvas was born for this.
From MDN, Canvas has the following definition:
The Canvas API provides a means for drawing graphics via JavaScript and the HTML
<canvas>…
As a front-end developer, HTML, CSS, JavaScript are fundamental skills. And in 2021, I think TypeScript is also a must-have skill for front-end developers. Then we need to learn one of the three most popular front-end frameworks (React, Vue, Angular). Then we also need to be familiar with NPM, Webpack, and other tools. Finally, we need to understand how browsers work, how HTML and CSS are parsed by browsers, and how JavaScript interpreters work.
At the same time, we need to be aware that front-end developers are a type of programmer. …
JavaScript Interview Questions
Question
Will there be a significant difference in the time it takes to execute the following two pieces of code?
Code1:
Code2:
Analysis
At first glance, both pieces of code are three-level nested for loops, each iterating 100 * 1000 * 1000 times.
So there should be no difference in performance?
Wait, wait, wait, be careful. The nesting order of the for loops of these two code pieces is actually different. In the first code, the outermost for loop executes 100 times and the innermost for loop executes 10,000 times. …
A funny demo.
In the previous articles, we made some static graphics. In this article, we will learn how to make the animation.
This is the final product:
Principle of animation
Before making animation effects, we need to understand the principles of making animation. Do you know how the animation effects are produced?
Here is a funny video:
This video vividly shows how the animation is produced: If one by one logically related static pictures are shown to the audience in sequence, then in the audience’s perspective, the pictures will feel moving.
So if we want to make random particle special effects, we only need…
We can first imagine: if we want to draw an image in reality, what tools do we need?
First, we need a canvas, and then we need a pen.
On our web page, the canvas is the Canvas element in HTML.
We can use the Canvas tag to create a canvas:
<html>
<body>
<canvas></canvas>
</body>
</html>Like regular elements, this element is also a rectangular container. We can add some CSS styles to it:
<!DOCTYPE html>
<html lang="en"><head>
<style>
canvas {
background-color: black;
}
</style>
</head><body>
<canvas></canvas>
</body></html>
This is the result:
In the previous article, we introduced how to draw line segments. Now we want to draw a rectangle, so what should we do?
In fact, a rectangle is composed of four-line segments. We only need to draw four line segments connected end to end and ensure that the angle between them is 90°.
Here is the code:
Result:
In the previous article, we learned how to use Canvas to draw some basic shapes, in this article we started to make some interesting demos.
This gif shows our final project in the article:
The effect is: when our mouse moves on the page, the page will automatically generate a trajectory. This is a very common function in drawing software, so how do we achieve it?
First of all, we must understand a basic principle, that is, this kind of curve can be regarded as a large number of points. …
How to do in nested Promise?
The Promise always is an important but complex point in JavaScript. But when I review other coders’ ways to handle Promise exceptions, there often has some mistakes. Here, let’s discuss this question.
Handle Promise Exception with Try Catch
No more words, let’s look at a code snippet:
What is the result after running the above code? Can the try-catch statement really catch the exception which was thrown by the Promise object?
Here is the running result:
A demo contains many tips.
The popularity and importance of React and Typescript do not need me to repeat it. In order to help beginners understand how to use React + TypeScript to build projects, I made this demo and wrote related tutorials, hoping to be useful to you.
Project Introduction
A company is selling a batch of robots. Each robot has information such as type, price, picture, description, and so on. We need to develop an electronic mall for this company to display and sell robots.
