canvas.php

<!DOCTYPE html> <html lang ="en"> <head> <meta charset = "utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="SEIS751 Projct"> <meta name="author" content="Aba Dougan"> <!-- Bootstrap core CSS --> <link href="http://linux2.gps.stthomas.edu/~doug1324/project/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet"> <link href="http://linux2.gps.stthomas.edu/~doug1324/project/css/style.css" rel="stylesheet"> <link href="http://linux2.gps.stthomas.edu/~doug1324/project/css/sticky-footer.css" rel="stylesheet"> <!-- favicon --> <link rel="shortcut icon" href="http://linux2.gps.stthomas.edu/~doug1324/project/img/images.favicon.ico" type="image/x.icon" sizes="50x50"/> <title> Aba Project -canvas </title> <style> canvas { border: 3px #CCC solid; } </style> </head> <body> <?php require ("./files/nav.php"); ?> <div class="column" > <div class="card"> <h2>Features<h2> <h5>This is page displays the graphics, data visualization, canvas element, JSON, video, audio and many more element</h5> <P > Click on each button to see the display </P> <div class="row" > <div class="leftcolumn" > <?php require ("./files/flink.php"); ?> </div> <div class="rightcolumn"> <p>Display of Canvas Element:</p> <div class="container1-fluid w-75 pt-5"> <div id="container"> <canvas id="myCanvas" height="400" width="400"></canvas> </div> <script> var mainCanvas = document.querySelector("#myCanvas"); var mainContext = mainCanvas.getContext("2d"); var canvasWidth = mainCanvas.width; var canvasHeight = mainCanvas.height; var angle = 0; function drawCircle() { mainContext.clearRect(0, 0, canvasWidth, canvasHeight); // color in the background mainContext.fillStyle = "#EEEEEE"; mainContext.fillRect(0, 0, canvasWidth, canvasHeight); // draw the circle mainContext.beginPath(); var radius = 25 + 150 * Math.abs(Math.cos(angle)); mainContext.arc(225, 225, radius, 0, Math.PI * 2, false); mainContext.closePath(); // color in the circle mainContext.fillStyle = "#006699"; mainContext.fill(); angle += Math.PI / 64; } drawCircle(); </script> </div> </div> <p align="center"> Drawing a Circle (Animation) </p> </div> </div> <svg></svg> <!-- Footer --> <footer class="footer"> <?php require ("./files/footernav.php"); ?> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
My Web Design & Development

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.