Sign Up Form Output
autofill
Posts
Compilation of Finals Part 2
Animation <!DOCTYPE html> <html> <head> Animation <style> div { width: 2000px; height: 100px; background-color: pink; animation-name: example; animation-duration: 10s; } @keyframes example { from {background-color: red;} to {background-color: blue;} } To make the animation transition, they keyframes are key, cuz they're named Keyframes. there you see From and To, which are self explanatory, so you use Keyframes to indicate what is the start and end of an animation with HTML. Embedding a Youtube Video with IFrames <iframe width="1080" height="720" src="https://www.youtube.com/embed/29ZBBsq6uSU"> </iframe> Is all you need, you can insert this in the body of an HTML you are working on, change the link and it will play the video in the HTML, all you need is internet.
Compilation of Finals Part 1
Drawing on a Canvas To make your HTML Code act like a canvas you must first use <canvas id="MyCanvas" width="1080" Height="720" style="border:1px solid #4f1802 ;"> To Establish a canvas, i chose the standard 1080, 720px resolution. once the canvas has been established, you can now draw on it. var canvas = document.getElementById("MyCanvas"); var ctx = canvas.getContext("2d"); ctx.globalAlpha = 1 Is also the ID if your canvas, to make it identify as a Canvas. ctx.fillStyle = "#a6471e"; ctx.fillRect(500,110,280,350); ctx.fillStyle = "#fac087"; ctx.fillRect(480,100,230,300); ctx.fillStyle = "#17fc03"; ctx.fillRect(500,50,300,50); Each one acts as a layer, the one on top is the top layer so it will cover everything underneath it. Counting Drill To establish the UI or Fieldset first you need to do <canvas id="myCanvas" width="1200" height=...
Canvas Drawing HTML
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Exercise Drawing on A Canvas </title> </head> <body> <canvas id="MyCanvas" width="1080" Height="720" style="border:1px solid #4f1802 ;"> Molina </canvas> <script> var canvas = document.getElementById("MyCanvas"); var ctx = canvas.getContext("2d"); ctx.globalAlpha = 1 ctx.fillStyle = "#a6471e"; ctx.fillRect(500,110,280,350); ctx.fillStyle = "#fac087"; ctx.fillRect(480,100,230,300); ctx.fillStyle = "#17fc03"; ctx.fillRect(500,50,300,50); </script>