preface

Christmas is coming, a few days ago xiao Bao thought of a great creative feeling), but yesterday noon suddenly brainwave, a new idea, before Christmas is estimated to be unable to deliver, New Year’s day see ~~~.

Originally wanted to draw a Christmas tree, but the top of the Christmas tree is too curly, there have been a lot of big guys to draw a variety of fantastic Christmas tree, very good-looking, very cool, hard to emulate. Such as:

  • Songhua giant: lovely Christmas tree —- HTML + CSS code implementation
  • Sea embrace giant: [programmer romance] Christmas is coming, why not give him a programmer romance
  • Yong-ju: Programmers can be romantic too! Featured 10 Christmas special effects web design – front-end HTML+CSS implementation
  • .

So Bao plans to take a different approach to Christmas beyond the tree, with snowman, moose, and elaborate messages of candy and buns. The core of this article is a blessing, bless everyone happy, happy, high not volume flag, our duty!

A snowman

Snowman is mainly composed of three parts: tree, snowman, snowflake.

Trees are made up of simple triangles and rectangles, which are relatively easy to implement.

Snowman is also composed of simple graphics, but the specific implementation is somewhat interesting and lovely, such as the snowman lips is actually the letter C with the rotation of -90DEG, snowman hands with :before/:after pseudo-class implementation.

The implementation of snowflake does not use JS, using the infinite property of animation to achieve.

Static renderings

Milu deer

Bao originally wanted to imitate the painting of elk, but found that there was no such ability ah, not only can not draw, even the elk can not think out.

Milu deer is a symbol of good luck, how can not lack the milu deer ah? So xiao Bao found some giant draw elk, give them, hope that Christmas day, colorful elk will pull Santa Claus to meet all your wishes.

Elk and Santa Claus

Example description: three elk pulling Santa Claus in the snow running example source: Merry Christmas

Gif dynamic renderings

Cute moose

The red-nosed Reindeer, however, loved the reindeer

Static renderings

Gawk elk

Example description: a cute cute little elk example source: CSS Rudolph

Static renderings

Cool elk

An example of a cool elk based on SVG

Gif dynamic renderings

candy

The candy packet is realized on the basis of text particles. The secondary canvas is changed from the original text to pictures. The packet selects a picture with more candy and draws it with particles.

Similar to the text particle implementation, the secondary canvas is changed from drawing text to drawing pictures. As there is a loading process of pictures, Promise is used for asynchronous processing.

// Initialize the subcanvas and draw the image
function initCanvas(ctx, { width, height }) {
    var image = new Image();
    image.src = "candy.jfif";
    image.crossOrigin = "Anonymous";
    return new Promise((res) = > {
        image.onload = function () {
            ctx.drawImage(image, 0.0, width, height);
            // Write the image to the canvas by pixel
            res();
        };
    });
}
Copy the code

While loading the GIF, you can guess how many candy bars the bag has prepared for you.

Gif dynamic renderings

Sentiment:

Next to send a packet personally written blessing, although the word is generally written ah, but full of friendship ah.

Pull a vote: tomorrow is the annual outstanding creator of the selection, have like small bag don’t forget to cast a vote for small bag

Source warehouse

Source code address: Christmas around

If you feel helpful, don’t forget to give the small bag a ⭐.

Past wonderful articles

  • Cow guest latest front-end JS written test 100 questions
  • The latest front end of the interview questions summary (including analysis)
  • CSS to achieve a free flying bird 🐦
  • Grab the latest front end test five hundred data analysis JS interview hot spots
  • Happy cat stroking for VSCode and website adoptive cats
  • Native JavaScript soul Test (1), how much can you answer?
  • A thorough understanding of prototypes and prototype chains in JavaScript
  • Complete understanding of EventLoop in JavaScript
  • “2W word big chapter 38 interview questions” completely clear JS this pointing to the problem

After the language

Guys, if you find this article helpful, give a like to 👍 or follow ➕ to support me.

In addition, if this article has a question, or do not understand part of the article, you can reply to me in the comment section, we come to discuss, learn together, progress together!