How to Make HTML5 Canvas Christmas Snowman Ball Animation

How to Make HTML5 Canvas Christmas Snowman Ball Animation: BY Patrick13 Nov,2020; Tags:
Christmas Snowman

Introduction

Today we will share a Christmas snowman ball animation based on HTML5 Canvas. We draw the snowman into a ball, and then click the mouse to shake the ball. Snowflakes float in the ball, which is very romantic.

How to Make HTML5 Canvas Christmas Snowman Ball Animation

Instructions

Css Code

:root {
  font-family: 'Charm', cursive;
}

body {
  background: #FFE7BA;
}

.textSpan {
  font-size: 10vw;
  height: 80vh;
}

Js Code

this.snowParticles = [];
  for (var i = 0; i < 300; i++) {
    var p = randomUnitCircle();
    this.snowParticles.push(new SnowParticle(this.x + p.x * this.radius * 0.9, this.y + p.y * this.radius * 0.9, Math.random() * 2 + 2));
  }
  
  this.glassGrad = gc.ctx.createRadialGradient(this.x, this.y, this.radius * 0.25, this.x, this.y, this.radius * 1);
  this.glassGrad.addColorStop(0, "rgba(100, 100, 100, 0.3)");
  this.glassGrad.addColorStop(1, "rgba(255, 255, 255, 0.5)");
  
  this.snowman = new Image();
  this.snowman.src = createSnowman();
  
  this.render = function() {
    gc.ctx.beginPath();
    gc.ctx.save();
    gc.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    gc.ctx.clip();
    
    gc.ctx.beginPath();
    gc.ctx.fillStyle = "white";
    gc.ctx.moveTo(this.x - this.radius * 1.5, this.y + this.radius);
    gc.ctx.quadraticCurveTo(this.x, this.y, this.x + this.radius * 1.5, this.y + this.radius);
    gc.ctx.lineTo(this.x + this.radius, this.y + this.radius * 2);
    gc.ctx.lineTo(this.x - this.radius, this.y + this.radius * 2);
    gc.ctx.closePath();
    gc.ctx.fill();
    
    gc.ctx.drawImage(this.snowman, this.x - this.radius, this.y - this.radius);
    
    gc.ctx.restore();

VIEW NOW