Welcome :Guest

Congratulations!!!

 Home >> Code Snippets >> Javascript >> Post New Resource

# Canvas: movements and rotation

Posted By:Kemal AL GAZZAH       Posted Date: November 11, 2015    Points: 40    Category: Javascript    URL: http://www.dotnetspark.com

using javascript and canvas to draw animated stars

Here is an illustration of the use of javascript and cavs to draw an animation of stars with different numbers of tips

<html>
<script language="javascript">
function draw(N,a,color)
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clearRect(0, 0, 1000, 1000);
var cx = c.width / 2;
var cy = c.height / 2;
ctx.beginPath();
ctx.lineWidth = 1;
var theta=Math.PI/2;
var x = cx + radius  * Math.sin(theta);
var y = cy - radius  * Math.cos(theta);

for(i=1;i<N+1;i++)
{
for(j=i+1*a;j<i+1*a+1;j++)
{
var theta=i*(2*Math.PI)/N;
var x = cx + radius  * Math.sin(theta);
var y = cy - radius  * Math.cos(theta);

var theta1=(j)*(2*Math.PI)/N;
var x1 = cx + radius  * Math.sin(theta1);
var y1 = cy - radius  * Math.cos(theta1);
ctx.moveTo(x,y);
ctx.lineTo(x1,y1);
}
}
ctx.closePath();
ctx.lineWidth = 2;
ctx.strokeStyle = color;
ctx.stroke();
var dataURL = c.toDataURL();
document.getElementById('canvasimg').src = dataURL;
}

N=30;
a=1;
color='red';
colors=new Array("red","green","blue","purple","pink","gold","black","#003300");
c=1;
function ShowBanners()
a++;
if (a==N){
a=0;
c++
};

if(c==colors.length) {c=0};
draw(N,a,colors[c]);
setTimeout("ShowBanners()",100);
}
</script>
<canvas id="myCanvas" width="500" height="500"  style="display:none;">Your browser does not support the HTML5 canvas tag.</canvas>
<img id="canvasimg" alt="right click to save"/>
<script></script>
</body>
</html>

Responses

No response found. Be the first to respond this post

Post Comment