How to Make Circular Square Flip Animation in HTML5 Canvas 3D

How to Make Circular Square Flip Animation in HTML5 Canvas 3D: BY Steven13 Nov,2020; Tags:
HTML5 Canvas HTML5 Animation

Introduction

The box animation brought to you today is based on HTML5 Canvas. It is characterized by many boxes forming a ring, and each box rotates continuously. At the same time, you can drag the mouse to see the different perspectives of the ring box.

How to Make Circular Square Flip Animation in HTML5 Canvas 3D

Instructions

Css Code

body {
 background-color: #000;
 text-align:center;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}
.zdog-canvas {
  background: transparent;
  cursor: move;
}

Js Code

const radiansToDegrees = (_val) => {  
  return _val * (Math.PI/180);
}

const componentToHex = (c) => {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

const rgbToHex = (r, g, b) => {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

const hslToRgb = (_h, s, l) => {	
	var h = Math.min(_h, 359)/60;
	
	var c = (1-Math.abs((2*l)-1))*s;
	var x = c*(1-Math.abs((h % 2)-1));
	var m = l - (0.5*c);
	
	var r = m, g = m, b = m;
	
	if (h < 1) {
		r += c, g = +x, b += 0;
	} else if (h < 2) {
		r += x, g += c, b += 0;
	} else if (h < 3) {
		r += 0, g += c, b += x;
	} else if (h < 4) {
		r += 0, g += x, b += c;
	} else if (h < 5) {
		r += x, g += 0, b += c;
	} else if (h < 6) {
		r += c, g += 0, b += x;
	} else {
		r = 0, g = 0, b = 0;
	}
	
	return rgbToHex(Math.floor(r*255), Math.floor(g*255) , Math.floor(b*255) );
}

VIEW NOW