VB icon

html5 Line Drawing

Email
Submitted on: 3/23/2016 4:35:21 PM
By: T J Betz 
Level: Intermediate
User Rating: Unrated
Compatibility: C++.NET
Views: 1806
 
     line drawing function using html5 canvas

 
code:
Can't Copy and Paste this?
Click here for a copy-and-paste friendly version of this code!
				
//**************************************
// Name: html5 Line Drawing
// Description:line drawing function using html5 canvas
// By: T J Betz
//**************************************

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400" style="background-color:#f9f9a2" >>
 Your browser does not support HTML5 Canvas</canvas>
<script>
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
for (var i=0;i<36;i++){
 var x1 = 200 +170 * Math.cos(6.28 * i / 36);
 var y1 = 200 +170 * Math.sin(6.28 * i / 36);
 var x2 = 200 +50 *Math.cos(6.28 * i/ 36);
 var y2 = 200 +50 * Math.sin(6.28 * i /36);
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineWidth = "2";
ctx.strokeStyle = "blue";
ctx.stroke();
 }
</script>
</body>
</html>


Other 1 submission(s) by this author

 


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this code (in the Intermediate category)?
(The code with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 

Other User Comments


 There are no comments on this submission.
 

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular code, please click here instead.)
 

To post feedback, first please login.