1 / 6

Simple Canvas Example

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 ();

mahala
Download Presentation

Simple Canvas Example

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Simple Canvas Example <canvas id="canvas1"> Your browser doesn’t support canvases </canvas> varcanvas = document.getElementById("canvas1"); varcontext = 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

  2. More Complex Canvas Example CS 142 Lecture Notes: HTML5

  3. Progress <progress value="22" max="100"></progress> CS 142 Lecture Notes: HTML5

  4. Web Storage localStorage.setItem("state", "California"); localStorage.getItem("state"); localStorage.removeItem("state"); localStorage.state = "Missouri"; CS 142 Lecture Notes: HTML5

  5. Drag and Drop • Mark elements draggable: <imgdraggable="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

  6. CS 142 Lecture Notes: HTML5

More Related