//************************************** // Name: html5 Line Drawing // Description:line drawing function using html5 canvas // By: T J Betz // // // Inputs:None // // Returns:None // //Assumes:None // //Side Effects:None //************************************** <!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>