Desertification Effect: A Marvelous Experiment with HTML5 and Canvas
As a self-proclaimed Marvel fan, I must admit that I’m not always eager to watch the latest blockbuster on its opening night. The IMAX hall fare price of 299 yuan is indeed steep, making it difficult for migrant workers to splurge on a movie ticket. However, with the recent price drop to 89 yuan, it’s now a more reasonable time to catch a movie. For those who enjoy movies, finding a good viewing position is a must, and I’m not advocating for watching the premiere or having to see a movie on its first day.
In this article, we’ll explore a fascinating experiment involving Google’s search results and the concept of desertification. We’ll delve into the world of HTML5 and canvas, creating a template that produces a mesmerizing desertification effect. So, let’s get started!
Creating a Template for Desertification
To achieve the desertification effect, we’ll create a template that utilizes the html2canvas plugin. This plugin allows us to convert elements on a web page into a canvas image. We’ll use this technique to create a desertification effect that resembles the random disappearance of elements on a web page.
First, we’ll create a template with a list of random desertification effects. The template code is as follows:
<div class="box">
<div class="bomb">Pata!</div>
<ul>
<li class="item">
<h3> Lapel with five lakes and rivers, and control primers Ouyue Man Jing.</h3>
</li>
<li class="item">
<h3> Water flooded Han Tan and make clear, smoke photocoagulation and twilight purple mountains.</h3>
</li>
<li class="item">
<h3> Sunset and lone duck flying, relaxed and a total length sky color.</h3>
</li>
<li class="item">
<img src="./1.jpg" />
</li>
</ul>
</div>
Implementing the Principle of Desertification
The principle of desertification involves hiding the original elements and replacing them with a canvas image that represents the desertification effect. We’ll use the html2canvas plugin to achieve this.
First, we’ll create a canvas with a width and height of 32 pixels. We’ll then extract the pixels from the original elements and arrange them in accordance with the law of 32.
const {width, height} = dom;
let ctx = dom.getContext('2d');
let originalFrame = ctx.getImageData(0, 0, width, height);
let frames = [];
for (let i = 0; i < COUNT; i++) {
frames[i] = ctx.createImageData(width, height);
}
for (x = 0; x < width; ++x) {
for (y = 0; y < height; ++y) {
var frameIndex = Math.floor((COUNT * (Math.random() + (2 * x) / width)) / 3);
var pixelIndex = 4 * (y * width + x);
for (offset = 0; offset < 4; offset++) {
frames[frameIndex].data[pixelIndex + offset] = originalFrame.data[pixelIndex + offset];
}
}
}
Converting Canvas to DOM Elements
Next, we’ll convert the canvas image into DOM elements that represent the desertification effect. We’ll use the html2canvas plugin to achieve this.
let container = document.createElement('div');
container.classList.add('container');
container.style.width = `${width}px`;
container.style.height = `${height}px`;
let frames2doms = frames.map((frameData, i) => {
let domCopy = dom.cloneNode(true);
domCopy.getContext('2d').putImageData(frameData, 0, 0);
domCopy.style.transitionDelay = `(${1.35 * i) / frames.length}s`;
container.appendChild(domCopy);
return domCopy;
});
Achieving the Desertification Effect
Finally, we’ll gather the scattered elements and make them move up, making it seem like desertification is occurring. We’ll use the transform property to rotate the elements and create a sense of movement.
frames2doms.map(item => {
let random = 2 * Math.PI * (Math.random() - 0.5);
item.style.transform = `rotate(${15 * (Math.random() - 0.5)}deg) translate(${60 * Math.cos(random)}px, ${30 * Math.sin(random)}px) rotate(${-15 * (Math.random() - 0.5)}deg)`;
item.style.opacity = 0;
});
Experimental Results
When you click the button, the 32 DOM elements will rotate and jump, creating a sense of desertification. The effect is mesmerizing, and it’s a great example of what can be achieved with HTML5 and canvas.
Conclusion
In this article, we’ve explored the concept of desertification and created a template that produces a mesmerizing effect. We’ve used the html2canvas plugin to convert elements into a canvas image and achieved the desertification effect by hiding the original elements and replacing them with a canvas image. The result is a fascinating experiment that showcases the power of HTML5 and canvas.