jQuery canvas animation with circle fill with text.

Example: 01

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mix1</title>
</head>
<body>
<canvas class="grey darken-4" id="canvas" width="" height=""></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = 1000;
var mouse = {
x: undefined,
y: undefined
}
window.addEventListener('mousemove', function(e){
mouse.x = e.x;
mouse.y = e.y;
});
window.addEventListener('resize', function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function Circle(){
this.radius = getRandomInt(30);
this.originalSize = this.radius;
this.x = Math.random() * (innerWidth - this.radius * 2) + this.radius;
this.y = Math.random() * (innerHeight - this.radius * 2) + this.radius;
this.gradient = Math.random();
this.color = 'rgba('+ getRandomInt(255) +','+ getRandomInt(255) + ','+ getRandomInt(255) + ','+ this.gradient +')';
this.xVelocity = 5 * (Math.random() - Math.random());
this.yVelocity = 5 * (Math.random() - Math.random());
this.draw = function(){
c.beginPath();
c.arc(this.x,this.y, this.radius, 0, Math.PI*2, false);
c.strokeStyle = this.color;
c.stroke();
c.fillStyle = this.color;
c.fill();
this.update();
}
this.update = function(){
if(this.x + this.radius > innerWidth || this.x - this.radius < 0){
this.xVelocity = -this.xVelocity;
}
if(this.y + this.radius > innerHeight || this.y - this.radius < 0){
this.yVelocity = -this.yVelocity;
}
this.x += this.xVelocity;
this.y += this.yVelocity;
if(mouse.x - this.x < 50 && mouse.x - this.x > -50
&& mouse.y - this.y < 50 && mouse.y - this.y > -50){
if(this.radius < 150){
this.radius += 2;
}
}
else if(this.radius !== this.originalSize){
this.radius -= 2;
}
}
}
var circleArray = [];
for(var i = 0; i < 100; i++){
circleArray.push(new Circle());
}
function animate(){
c.clearRect(0,0, innerWidth, innerHeight);
for(var i = 0; i < circleArray.length; i++){
circleArray[i].draw();
}
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>

Example: 02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mix2</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;//300;
var textRy=["C", "C++", "JS", "java",'python','laravel','javascript'];
var mouse = {
x: undefined,
y: undefined
}
window.addEventListener('mousemove', function(e){
mouse.x = e.x;
mouse.y = e.y;
});
window.addEventListener('resize', function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function Circle(){
this.radius = getRandomInt(30);
this.originalSize = this.radius;
this.x = Math.random() * (innerWidth - this.radius * 2) + this.radius;
this.y = Math.random() * (innerHeight - this.radius * 2) + this.radius;
this.text = textRy[~~(Math.random() * textRy.length)];
this.gradient = Math.random();
this.color = 'rgba('+ getRandomInt(255) +','+ getRandomInt(255) + ','+ getRandomInt(255) + ','+ this.gradient +')';
this.xVelocity = 5 * (Math.random() - Math.random());
this.yVelocity = 5 * (Math.random() - Math.random());
this.draw = function(){
c.beginPath();
c.arc(this.x,this.y, this.radius, 0, Math.PI*2, false);
c.strokeStyle = this.color;
c.stroke();
c.fillStyle = this.color;
c.fill();

c.textAlign="center";
c.textBaseline="middle";
c.font=(this.radius*.8)+"px Consolas";
c.fillStyle = "blue";
c.fillText(this.text,this.x,this.y);

this.update();
}
this.update = function(){
if(this.x + this.radius > innerWidth || this.x - this.radius < 0){
this.xVelocity = -this.xVelocity;
}
if(this.y + this.radius > innerHeight || this.y - this.radius < 0){
this.yVelocity = -this.yVelocity;
}
this.x += this.xVelocity;
this.y += this.yVelocity;
if(mouse.x - this.x < 50 && mouse.x - this.x > -50
&& mouse.y - this.y < 50 && mouse.y - this.y > -50){
if(this.radius < 150){
this.radius += 2;
}
}
else if(this.radius !== this.originalSize){
this.radius -= 2;
}
}
}
var circleArray = [];
for(var i = 0; i < 100; i++){
circleArray.push(new Circle());
}
function animate(){
c.clearRect(0,0, innerWidth, innerHeight);
for(var i = 0; i < circleArray.length; i++){
circleArray[i].draw();
}
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>

Source: https://stackoverflow.com/questions/53683421/jquery-canvas-animation-with-circle-fill-with-text

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

Some Lesson - RAM PUKAR

jQuery canvas animation with circle fill with text.

About Ram Pukar

0 comments: