Web Development Lecture Notes on HTML5 and Canvas Basics
Explore HTML5 features like progress bars, web storage, drag-and-drop events, and canvas examples in this comprehensive set of lecture notes for CS 142. Learn about setting up progress bars, using web storage, implementing drag-and-drop functionality, and creating simple and complex canvas examples. Dive into the fundamentals of web development with this informative resource.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Progress <progress value="22" max="100"></progress> CS 142 Lecture Notes: HTML5 Slide 1
Web Storage localStorage.setItem("state", "California"); localStorage.getItem("state"); localStorage.removeItem("state"); localStorage.state = "Missouri"; CS 142 Lecture Notes: HTML5 Slide 2
Drag and Drop Mark elements draggable: <img draggable="true"> New events: ondragstart: when user picks up object to drag ondragover: when user drags object over an HTML element ondrop: when user drops object Passing information from source to target: One or more type-value pairs In ondragstart handler: event.dataTransfer.setData(type, value); In ondragover and ondrop handlers: var value = event.dataTransfer.getData(type); CS 142 Lecture Notes: HTML5 Slide 3
CS 142 Lecture Notes: HTML5 Slide 4
Simple Canvas Example <canvas id="canvas1"> Your browser doesn t support canvases </canvas> var canvas = document.getElementById("canvas1"); var context = canvas.getContext("2d"); context.strokeStyle = "#ff0000"; context.lineWidth = 8; context.beginPath(); context.moveTo(50, 100); context.lineTo(200, 100); context.lineTo(200, 50); context.lineTo(150, 50); context.lineTo(150, 150); context.stroke(); 100 50 CS 142 Lecture Notes: HTML5 Slide 5
More Complex Canvas Example CS 142 Lecture Notes: HTML5 Slide 6
