.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
Sharon Maxwell

Home >> Code Snippets >> Javascript >> Post New Resource Bookmark and Share   

 Subscribe to Code Snippets

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>
<head>
<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 radius = 200;
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>
</head>
<body onload="ShowBanners()">
<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>

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More code samples in C#, ASP.Net, Vb.Net and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend