Creating an Event Waiting Badge with HTML5 canvas
Good day! I have long wanted to indulge with html5 canvas. When there was a question what to do, which is not too laborious and not too miserable, I decided to make a substitute for the waiting icon (gif of a picture).
In general, this is what I did: http://receipt.of.by/html5_canvas/html5_canvas.html . Anyone looking to watch for at least 5 seconds will be a surprise.
Source:
')
The source code is not an example of the beauty, quality and validity of the code, because it was created in a hurry.
Thank you all for your attention, I hope this article will be useful for someone.
In general, this is what I did: http://receipt.of.by/html5_canvas/html5_canvas.html . Anyone looking to watch for at least 5 seconds will be a surprise.
Source:
<html> <head> <title>worm</title> </head> <body style="background-color:#fff"> <div id='parent' style="position:absolute; top:200px;left:200px;"> <canvas id='example' width="50" height="50"> </canvas> </div> <script>
function Worm() { var ctx; this.upWorm = function() { ctx.moveTo(0,49); ctx.bezierCurveTo(10, 33, 33, 16, 49, 49); ctx.stroke(); } this.downWorm = function() { ctx.moveTo(0,49); ctx.bezierCurveTo(10, 48, 33, 42, 49, 49); ctx.stroke(); } this.startWorm = function(marginLeft, marginTop) { var parent = document.getElementById('parent'); window.clearInterval(circleInter); parent.innerHTML = ''; var canv = document.createElement('canvas'); canv.width = 50; canv.height = 50; canv.style.marginLeft = marginLeft || 0; canv.style.marginTop = marginTop || 0; parent.appendChild(canv); ctx = canv.getContext('2d'); // var PI = Math.PI; ctx.beginPath(); circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: 5.6*PI, endingAngle: 5.8*PI, counterclockwise: false }; var hue = 0; var hue = hue + 10 * Math.random(); ctx.strokeStyle = 'hsl(' + hue + ', 10%, 10%)'; ctx.shadowColor = '#77ff77'; ctx.shadowBlur = 3; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.stroke(); var i=1; var intervalFly = window.setInterval(function(){ canv.style.marginLeft = i; canv.style.marginTop = i; i=i+1; }, 15); // var worm = this; window.setTimeout(function(){ window.clearInterval(intervalFly); var i=0; ctx.clearRect(0,0,50,50); ctx.beginPath(); worm.downWorm(); canv.style.marginTop = 12; inter = window.setInterval(function(){ if(i==0) { i=5; } ctx.clearRect(0,0,50,50); canv.style.marginLeft = i*10; ctx.beginPath(); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.shadowColor = '#77ff77'; ctx.shadowBlur = 2; if(i%2 ==0) worm.downWorm(); else worm.upWorm(); i++; }, 250); }, 700); } } var example = document.getElementById("example"); var ctx = example.getContext('2d'); var PI = Math.PI; var i=0; var j=0.2; circleInter = window.setInterval(function(){ ctx.clearRect(0,0,1000,1000); ctx.beginPath(); // circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: 0, endingAngle: PI*PI, counterclockwise: false }; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 4; ctx.strokeStyle = "white"; // line color ctx.stroke(); // ctx.beginPath(); circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: i*PI, endingAngle: j*PI, counterclockwise: false }; var hue = hue + 10 * Math.random(); ctx.strokeStyle = 'hsl(' + hue + ', 10%, 10%)'; ctx.shadowColor = 'blue'; ctx.shadowBlur = 7; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.stroke(); //if(i > 2) { i=0; j=0.2;} i=i+0.01; j=j+0.01; if(i>7.5) { var worm = new Worm(); worm.startWorm(); } }, 5);
</script> </body> </html>
<html> <head> <title>worm</title> </head> <body style="background-color:#fff"> <div id='parent' style="position:absolute; top:200px;left:200px;"> <canvas id='example' width="50" height="50"> </canvas> </div> <script>
function Worm() { var ctx; this.upWorm = function() { ctx.moveTo(0,49); ctx.bezierCurveTo(10, 33, 33, 16, 49, 49); ctx.stroke(); } this.downWorm = function() { ctx.moveTo(0,49); ctx.bezierCurveTo(10, 48, 33, 42, 49, 49); ctx.stroke(); } this.startWorm = function(marginLeft, marginTop) { var parent = document.getElementById('parent'); window.clearInterval(circleInter); parent.innerHTML = ''; var canv = document.createElement('canvas'); canv.width = 50; canv.height = 50; canv.style.marginLeft = marginLeft || 0; canv.style.marginTop = marginTop || 0; parent.appendChild(canv); ctx = canv.getContext('2d'); // var PI = Math.PI; ctx.beginPath(); circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: 5.6*PI, endingAngle: 5.8*PI, counterclockwise: false }; var hue = 0; var hue = hue + 10 * Math.random(); ctx.strokeStyle = 'hsl(' + hue + ', 10%, 10%)'; ctx.shadowColor = '#77ff77'; ctx.shadowBlur = 3; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.stroke(); var i=1; var intervalFly = window.setInterval(function(){ canv.style.marginLeft = i; canv.style.marginTop = i; i=i+1; }, 15); // var worm = this; window.setTimeout(function(){ window.clearInterval(intervalFly); var i=0; ctx.clearRect(0,0,50,50); ctx.beginPath(); worm.downWorm(); canv.style.marginTop = 12; inter = window.setInterval(function(){ if(i==0) { i=5; } ctx.clearRect(0,0,50,50); canv.style.marginLeft = i*10; ctx.beginPath(); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.shadowColor = '#77ff77'; ctx.shadowBlur = 2; if(i%2 ==0) worm.downWorm(); else worm.upWorm(); i++; }, 250); }, 700); } } var example = document.getElementById("example"); var ctx = example.getContext('2d'); var PI = Math.PI; var i=0; var j=0.2; circleInter = window.setInterval(function(){ ctx.clearRect(0,0,1000,1000); ctx.beginPath(); // circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: 0, endingAngle: PI*PI, counterclockwise: false }; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 4; ctx.strokeStyle = "white"; // line color ctx.stroke(); // ctx.beginPath(); circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: i*PI, endingAngle: j*PI, counterclockwise: false }; var hue = hue + 10 * Math.random(); ctx.strokeStyle = 'hsl(' + hue + ', 10%, 10%)'; ctx.shadowColor = 'blue'; ctx.shadowBlur = 7; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.stroke(); //if(i > 2) { i=0; j=0.2;} i=i+0.01; j=j+0.01; if(i>7.5) { var worm = new Worm(); worm.startWorm(); } }, 5);
</script> </body> </html>
<html> <head> <title>worm</title> </head> <body style="background-color:#fff"> <div id='parent' style="position:absolute; top:200px;left:200px;"> <canvas id='example' width="50" height="50"> </canvas> </div> <script>
function Worm() { var ctx; this.upWorm = function() { ctx.moveTo(0,49); ctx.bezierCurveTo(10, 33, 33, 16, 49, 49); ctx.stroke(); } this.downWorm = function() { ctx.moveTo(0,49); ctx.bezierCurveTo(10, 48, 33, 42, 49, 49); ctx.stroke(); } this.startWorm = function(marginLeft, marginTop) { var parent = document.getElementById('parent'); window.clearInterval(circleInter); parent.innerHTML = ''; var canv = document.createElement('canvas'); canv.width = 50; canv.height = 50; canv.style.marginLeft = marginLeft || 0; canv.style.marginTop = marginTop || 0; parent.appendChild(canv); ctx = canv.getContext('2d'); // var PI = Math.PI; ctx.beginPath(); circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: 5.6*PI, endingAngle: 5.8*PI, counterclockwise: false }; var hue = 0; var hue = hue + 10 * Math.random(); ctx.strokeStyle = 'hsl(' + hue + ', 10%, 10%)'; ctx.shadowColor = '#77ff77'; ctx.shadowBlur = 3; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.stroke(); var i=1; var intervalFly = window.setInterval(function(){ canv.style.marginLeft = i; canv.style.marginTop = i; i=i+1; }, 15); // var worm = this; window.setTimeout(function(){ window.clearInterval(intervalFly); var i=0; ctx.clearRect(0,0,50,50); ctx.beginPath(); worm.downWorm(); canv.style.marginTop = 12; inter = window.setInterval(function(){ if(i==0) { i=5; } ctx.clearRect(0,0,50,50); canv.style.marginLeft = i*10; ctx.beginPath(); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.shadowColor = '#77ff77'; ctx.shadowBlur = 2; if(i%2 ==0) worm.downWorm(); else worm.upWorm(); i++; }, 250); }, 700); } } var example = document.getElementById("example"); var ctx = example.getContext('2d'); var PI = Math.PI; var i=0; var j=0.2; circleInter = window.setInterval(function(){ ctx.clearRect(0,0,1000,1000); ctx.beginPath(); // circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: 0, endingAngle: PI*PI, counterclockwise: false }; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 4; ctx.strokeStyle = "white"; // line color ctx.stroke(); // ctx.beginPath(); circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: i*PI, endingAngle: j*PI, counterclockwise: false }; var hue = hue + 10 * Math.random(); ctx.strokeStyle = 'hsl(' + hue + ', 10%, 10%)'; ctx.shadowColor = 'blue'; ctx.shadowBlur = 7; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.stroke(); //if(i > 2) { i=0; j=0.2;} i=i+0.01; j=j+0.01; if(i>7.5) { var worm = new Worm(); worm.startWorm(); } }, 5);
</script> </body> </html>
<html> <head> <title>worm</title> </head> <body style="background-color:#fff"> <div id='parent' style="position:absolute; top:200px;left:200px;"> <canvas id='example' width="50" height="50"> </canvas> </div> <script>
function Worm() { var ctx; this.upWorm = function() { ctx.moveTo(0,49); ctx.bezierCurveTo(10, 33, 33, 16, 49, 49); ctx.stroke(); } this.downWorm = function() { ctx.moveTo(0,49); ctx.bezierCurveTo(10, 48, 33, 42, 49, 49); ctx.stroke(); } this.startWorm = function(marginLeft, marginTop) { var parent = document.getElementById('parent'); window.clearInterval(circleInter); parent.innerHTML = ''; var canv = document.createElement('canvas'); canv.width = 50; canv.height = 50; canv.style.marginLeft = marginLeft || 0; canv.style.marginTop = marginTop || 0; parent.appendChild(canv); ctx = canv.getContext('2d'); // var PI = Math.PI; ctx.beginPath(); circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: 5.6*PI, endingAngle: 5.8*PI, counterclockwise: false }; var hue = 0; var hue = hue + 10 * Math.random(); ctx.strokeStyle = 'hsl(' + hue + ', 10%, 10%)'; ctx.shadowColor = '#77ff77'; ctx.shadowBlur = 3; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.stroke(); var i=1; var intervalFly = window.setInterval(function(){ canv.style.marginLeft = i; canv.style.marginTop = i; i=i+1; }, 15); // var worm = this; window.setTimeout(function(){ window.clearInterval(intervalFly); var i=0; ctx.clearRect(0,0,50,50); ctx.beginPath(); worm.downWorm(); canv.style.marginTop = 12; inter = window.setInterval(function(){ if(i==0) { i=5; } ctx.clearRect(0,0,50,50); canv.style.marginLeft = i*10; ctx.beginPath(); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.shadowColor = '#77ff77'; ctx.shadowBlur = 2; if(i%2 ==0) worm.downWorm(); else worm.upWorm(); i++; }, 250); }, 700); } } var example = document.getElementById("example"); var ctx = example.getContext('2d'); var PI = Math.PI; var i=0; var j=0.2; circleInter = window.setInterval(function(){ ctx.clearRect(0,0,1000,1000); ctx.beginPath(); // circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: 0, endingAngle: PI*PI, counterclockwise: false }; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 4; ctx.strokeStyle = "white"; // line color ctx.stroke(); // ctx.beginPath(); circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: i*PI, endingAngle: j*PI, counterclockwise: false }; var hue = hue + 10 * Math.random(); ctx.strokeStyle = 'hsl(' + hue + ', 10%, 10%)'; ctx.shadowColor = 'blue'; ctx.shadowBlur = 7; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.stroke(); //if(i > 2) { i=0; j=0.2;} i=i+0.01; j=j+0.01; if(i>7.5) { var worm = new Worm(); worm.startWorm(); } }, 5);
</script> </body> </html>
<html> <head> <title>worm</title> </head> <body style="background-color:#fff"> <div id='parent' style="position:absolute; top:200px;left:200px;"> <canvas id='example' width="50" height="50"> </canvas> </div> <script>
function Worm() { var ctx; this.upWorm = function() { ctx.moveTo(0,49); ctx.bezierCurveTo(10, 33, 33, 16, 49, 49); ctx.stroke(); } this.downWorm = function() { ctx.moveTo(0,49); ctx.bezierCurveTo(10, 48, 33, 42, 49, 49); ctx.stroke(); } this.startWorm = function(marginLeft, marginTop) { var parent = document.getElementById('parent'); window.clearInterval(circleInter); parent.innerHTML = ''; var canv = document.createElement('canvas'); canv.width = 50; canv.height = 50; canv.style.marginLeft = marginLeft || 0; canv.style.marginTop = marginTop || 0; parent.appendChild(canv); ctx = canv.getContext('2d'); // var PI = Math.PI; ctx.beginPath(); circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: 5.6*PI, endingAngle: 5.8*PI, counterclockwise: false }; var hue = 0; var hue = hue + 10 * Math.random(); ctx.strokeStyle = 'hsl(' + hue + ', 10%, 10%)'; ctx.shadowColor = '#77ff77'; ctx.shadowBlur = 3; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.stroke(); var i=1; var intervalFly = window.setInterval(function(){ canv.style.marginLeft = i; canv.style.marginTop = i; i=i+1; }, 15); // var worm = this; window.setTimeout(function(){ window.clearInterval(intervalFly); var i=0; ctx.clearRect(0,0,50,50); ctx.beginPath(); worm.downWorm(); canv.style.marginTop = 12; inter = window.setInterval(function(){ if(i==0) { i=5; } ctx.clearRect(0,0,50,50); canv.style.marginLeft = i*10; ctx.beginPath(); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.shadowColor = '#77ff77'; ctx.shadowBlur = 2; if(i%2 ==0) worm.downWorm(); else worm.upWorm(); i++; }, 250); }, 700); } } var example = document.getElementById("example"); var ctx = example.getContext('2d'); var PI = Math.PI; var i=0; var j=0.2; circleInter = window.setInterval(function(){ ctx.clearRect(0,0,1000,1000); ctx.beginPath(); // circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: 0, endingAngle: PI*PI, counterclockwise: false }; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 4; ctx.strokeStyle = "white"; // line color ctx.stroke(); // ctx.beginPath(); circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: i*PI, endingAngle: j*PI, counterclockwise: false }; var hue = hue + 10 * Math.random(); ctx.strokeStyle = 'hsl(' + hue + ', 10%, 10%)'; ctx.shadowColor = 'blue'; ctx.shadowBlur = 7; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.stroke(); //if(i > 2) { i=0; j=0.2;} i=i+0.01; j=j+0.01; if(i>7.5) { var worm = new Worm(); worm.startWorm(); } }, 5);
</script> </body> </html>
<html> <head> <title>worm</title> </head> <body style="background-color:#fff"> <div id='parent' style="position:absolute; top:200px;left:200px;"> <canvas id='example' width="50" height="50"> </canvas> </div> <script>
function Worm() { var ctx; this.upWorm = function() { ctx.moveTo(0,49); ctx.bezierCurveTo(10, 33, 33, 16, 49, 49); ctx.stroke(); } this.downWorm = function() { ctx.moveTo(0,49); ctx.bezierCurveTo(10, 48, 33, 42, 49, 49); ctx.stroke(); } this.startWorm = function(marginLeft, marginTop) { var parent = document.getElementById('parent'); window.clearInterval(circleInter); parent.innerHTML = ''; var canv = document.createElement('canvas'); canv.width = 50; canv.height = 50; canv.style.marginLeft = marginLeft || 0; canv.style.marginTop = marginTop || 0; parent.appendChild(canv); ctx = canv.getContext('2d'); // var PI = Math.PI; ctx.beginPath(); circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: 5.6*PI, endingAngle: 5.8*PI, counterclockwise: false }; var hue = 0; var hue = hue + 10 * Math.random(); ctx.strokeStyle = 'hsl(' + hue + ', 10%, 10%)'; ctx.shadowColor = '#77ff77'; ctx.shadowBlur = 3; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.stroke(); var i=1; var intervalFly = window.setInterval(function(){ canv.style.marginLeft = i; canv.style.marginTop = i; i=i+1; }, 15); // var worm = this; window.setTimeout(function(){ window.clearInterval(intervalFly); var i=0; ctx.clearRect(0,0,50,50); ctx.beginPath(); worm.downWorm(); canv.style.marginTop = 12; inter = window.setInterval(function(){ if(i==0) { i=5; } ctx.clearRect(0,0,50,50); canv.style.marginLeft = i*10; ctx.beginPath(); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.shadowColor = '#77ff77'; ctx.shadowBlur = 2; if(i%2 ==0) worm.downWorm(); else worm.upWorm(); i++; }, 250); }, 700); } } var example = document.getElementById("example"); var ctx = example.getContext('2d'); var PI = Math.PI; var i=0; var j=0.2; circleInter = window.setInterval(function(){ ctx.clearRect(0,0,1000,1000); ctx.beginPath(); // circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: 0, endingAngle: PI*PI, counterclockwise: false }; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 4; ctx.strokeStyle = "white"; // line color ctx.stroke(); // ctx.beginPath(); circle = { centerX: 25, centerY: 25, radius: 15, startingAngle: i*PI, endingAngle: j*PI, counterclockwise: false }; var hue = hue + 10 * Math.random(); ctx.strokeStyle = 'hsl(' + hue + ', 10%, 10%)'; ctx.shadowColor = 'blue'; ctx.shadowBlur = 7; ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise); ctx.lineWidth = 7; ctx.strokeStyle = "#77ff77"; // line color ctx.stroke(); //if(i > 2) { i=0; j=0.2;} i=i+0.01; j=j+0.01; if(i>7.5) { var worm = new Worm(); worm.startWorm(); } }, 5);
</script> </body> </html>
')
The source code is not an example of the beauty, quality and validity of the code, because it was created in a hurry.
Thank you all for your attention, I hope this article will be useful for someone.
Source: https://habr.com/ru/post/137154/
All Articles