Clever Geek Handbook

HTML5キャンバスを使用してイベント待機アイコンを作成する

良い一日！ 私は長い間、html5キャンバスにふけることを望んでいました。 何をすべきかという疑問が生じたとき、それはあまりにも時間がかからず、悲惨でもないので、私は待機アイコン（gif画像）の代わりを作ることにしました。



だからここに私が得たものがあります： http : //receipt.of.by/html5_canvas/html5_canvas.html みんな見て、少なくとも5秒見てください-驚きがあります。





ソースコード： 

 <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>









ソースコードは急いで作成されたため、コードの美しさ、品質、有効性の例ではありません。

ご清聴ありがとうございました。この記事が誰かに役立つことを願っています。


More articles:


All Articles