When we developed a normal website, we used to use some HTML tags such as
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?
Canvas was born for this.
From MDN, Canvas has the following definition:
At the same time, we need to be aware that front-end developers are a type of programmer. …
Will there be a significant difference in the time it takes to execute the following two pieces of code?
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. …
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:
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:
Like regular elements, this element is also a rectangular container. We can add some CSS styles to it:
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:
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. …
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:
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.
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.