All geek questions in one place

Waiting for html5 canvas animation

I am trying to implement the wating animation mentioned in this question , especially what looks like this:

enter image description here

But I do not want to use image files and try to implement it exclusively in html5 canvas and javascript. Also, I need a circular black background, not a square one. As a first step, I tried to draw a static frame (without movement / rotation) and did the following:

<html> <head><script> window.onload = function(){ var c=document.getElementById("waiting").getContext("2d"); c.lineCap="round"; c.fillStyle="#353535"; c.translate(100,100); function slit(p){ shade = 256*p; th = 2*Math.PI*p; cos = Math.cos(th); sin = Math.sin(th); c.strokeStyle = '#'+((shade<<16)+(shade<<8)+shade).toString(16); c.moveTo(55*cos, 55*sin); c.lineTo(84*cos, 84*sin); c.stroke(); c.closePath(); } c.lineWidth=0; c.arc(0,0,100,0,Math.PI*2); c.fill(); c.lineWidth=7; for(var i = 0;i<1;i+=0.05){slit(i);} } </script></head> <body><canvas id="waiting" width=200 height=200></canvas></body> </html>

The result is:

enter image description here

The problem is that lineCap="round" does not work correctly for all "cuts", and the lineWidth=0 attribute does not work for the edge of the circle. What am I doing wrong? I tested it with Chrome 16.0.912.63 and Firefox 10.0 and got similar results.

In the next step, I want the parts of the functions that I created above to interact with

 window.animationFrames = (function(callback){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){window.setTimeout(callback, 1000 / 60);}; })();

but for now I need to solve this problem first.

+6
source share
2 answers

There is a bit of confusion here.

Zero is not a valid value for line width. The specification dictates that if you say lineWidth = 0 it will be no-op.

Also, you are not using lineWidth there because you are not stroking. fill() does not take line width into account.

As for the other problem, all you have to do is call beginPath ! See here:

http://jsfiddle.net/JfcDL/

Just adding a beginPath call and you will get this with your code:

enter image description here

What you did wrong has been drawing all the way so far with each new stroke() . You need to call beginPath to open a new one, so stroke applies only to the last part, and not to all parts made so far.

+3
source

Thanks to the help of a few people here, I finally came up with this code that fully works with the movement:

 <html> <head><script> var r1 = 400; var r2 = 340; var r3 = 220; var slitWidth = 40; var speed = 0.0004; var attenuation = 1.7; function rgbToHex(r, g, b){ return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } window.nextFrame = (function(callback){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){window.setTimeout(callback, 1000 / 60);}; })(); window.onload = function(){ var waiting=document.getElementById('waiting').getContext('2d'); function slit(d,p){ shade = Math.round(Math.pow(1-(d+p)%1, attenuation)*255) th = Math.PI*2*(p); cos = Math.cos(th); sin = Math.sin(th); waiting.strokeStyle = rgbToHex(shade, shade, shade); waiting.beginPath(); waiting.moveTo(r2*cos, r2*sin); waiting.lineTo(r3*cos, r3*sin); waiting.stroke(); waiting.closePath(); } function frame(){ waiting.arc(0,0,r1,0,Math.PI*2); waiting.fill(); var time = new Date().getTime()* speed; for(var p = 1;p>0;p-=0.05){slit(time,p);} nextFrame(function(){frame();}); } waiting.lineCap='round'; waiting.lineWidth=slitWidth; waiting.fillStyle='#353535'; waiting.translate(r1, r1); frame(); } </script></head> <body><canvas id='waiting' width=800 height=800></canvas></body> </html>
+1
source

Source: https://habr.com/ru/post/904559/

More articles:


All Articles