HTML5 Canvas - Ua

1y ago
15 Views
2 Downloads
643.09 KB
15 Pages
Last View : 14d ago
Last Download : 3m ago
Upload by : Nixon Dill
Transcription

HTML5 and CSS3 – The Future of the Web Programming HTML5 Canvas Sergio Luján Mora 1

HTML5 & CSS3 Content Canvas Canvas reference HTML5 & CSS3 CANVAS 2

HTML5 & CSS3 Canvas The canvas element provides an API for twodimensional drawing—lines, fills, images, text, and so on The canvas is only a container for graphics, a script (e.g., JavaScript) must be used to actually draw the graphics Every pixel in the canvas can be controlled HTML5 & CSS3 Canvas Canvas element: canvas /canvas Attributes: – height – width 3

!DOCTYPE html HTML5 html head meta charset "utf-8" / title Canvas example /title script function draw() { var ctx document.querySelector("canvas").getContext("2d"); // First square ctx.fillRect(10, 10, 50, 50); // Second square ctx.fillRect(100, 100, 50, 50); } & CSS3 window.onload draw; /script body canvas /canvas /body /html HTML5 & CSS3 4

HTML5 & CSS3 Canvas Any text inside the canvas element will be displayed in browsers that does not support canvas HTML5 & CSS3 canvas p Your browser doesn't support <canvas> element. Please, downdload and use one of the following browsers: /p ul li Google Chrome /li li Mozilla Firefox /li li Opera /li /ul /canvas 5

HTML5 & CSS3 Canvas document.querySelector("canvas" ).getContext("2d"); – It gets the 2D context to allow you to draw – It provides methods to draw lines, boxes, circles, etc. fillRect(x, y, width, height) – Draws a filled rectangle using the color/style of the fillStyle attribute – The x and y coordinates start in the top left HTML5 & CSS3 Canvas Exercise: – Create the following pattern 6

HTML5 & CSS3 HTML5 & CSS3 Canvas Exercise: – Create the following pattern 7

HTML5 & CSS3 HTML5 & CSS3 // Creates a solid square ctx.fillStyle "rgb(0, 255, 0)"; ctx.fillRect(10, 10, 50, 50); // Draws an outline ctx.strokeStyle "rgb(0, 182, 0)"; ctx.lineWidth 5; ctx.strokeRect(9, 9, 52, 52); 8

HTML5 & CSS3 HTML5 & CSS3 var canvas document.getElementById('example'); var context canvas.getContext('2d'); context.fillStyle "rgb(0,255,0)"; context.fillRect (25, 25, 100, 100); context.fillStyle "rgba(255,0,0, 0.6)"; context.beginPath(); context.arc(125,100,50,0,Math.PI*2,true); context.fill(); context.fillStyle "rgba(0,0,255,0.6)"; context.beginPath(); context.moveTo(125,100); context.lineTo(175,50); context.lineTo(225,150); context.fill(); 9

HTML5 & CSS3 HTML5 & CSS3 var ctx document.querySelector("canvas").getContext("2d"); var img document.createElement("img"); // wait until the image has loaded img.onload function () { ctx.canvas.width img.width; ctx.canvas.height img.height; ctx.drawImage(img, 0, 0); }; img.src "sergio.jpg"; 10

HTML5 & CSS3 HTML5 & CSS3 // Transformation var pixels ctx.getImageData(0, 0, img.width, img.height); for(var i 0, n pixels.data.length; i n; i 4) { // Red pixels.data[i 0] 255 - pixels.data[i 0]; // Green pixels.data[i 1] 255 - pixels.data[i 2]; // Blue pixels.data[i 2] 255 - pixels.data[i 1]; } ctx.putImageData(pixels, 0, 0); 11

HTML5 & CSS3 HTML5 & CSS3 // Transformation var pixels ctx.getImageData(0, 0, img.width, img.height); for(var i 0, n pixels.data.length; i n; i 4) { total (255 - pixels.data[i 0] 255 - pixels.data[i 1] 255 - pixels.data[i 2]) / 3; pixels.data[i 0] total; pixels.data[i 1] total; pixels.data[i 2] total; } ctx.putImageData(pixels, 0, 0); 12

HTML5 & CSS3 CANVAS REFERENCE HTML5 & CSS3 Canvas reference t.html 13

HTML5 & CSS3 Color and styles fillStyle color style – The fill-color of the drawing strokeStyle color style – The stroke-color of the drawing lineWidth number – The width of the drawing stroke HTML5 & CSS3 Color and styles shadowColor color – The color of the shadow shadowOffsetX number – The horizontal distance of the shadow shadowOffsetX number – The horizontal distance of the shadow shadowBlur number – The size of the burring effect 14

HTML5 & CSS3 Path, curve, circle, and rectangle fillRect(x, y, w, h) strokeRect(x, y, w, h) clearRect(x, y, w, h) rect(x, y, w, h) moveTo(x, y) lineTo(x, y) HTML5 & CSS3 Path, curve, circle, and rectangle arc(x, y, r, sAngle, eAngle, aClockwise) arcTo(x1, y1, x2, y2, radius) 15

HTML5 Canvas Sergio Luján Mora . 2 HTML5 & CSS3 Content Canvas Canvas reference HTML5 & CSS3 CANVAS . 3 HTML5 & CSS3 Canvas The canvas element provides an API for two-dimensional drawing—lines, fills, images, text, and so on The canvas is only a container for graphics, a

Related Documents:

[HTML5 강좌 및 동영상 목록] [HTML5 동상 강좌] 1. HTML 5 개요 [HTML5 동상 강좌] 2. HTML4 vs HTML5 (1) [HTML5 동상 강좌] 3. HTML4 vs HTML5 (2) [HTML5 동상 강좌] 4. Sementic Element (1) [HTML5 동상 강좌] 5. Sementic Element (2) [HTML5 동상 강좌] 6. Strong Web Form [HTML5 동상 강좌] 7. Rich Text Edit API [HTML5 동상 강좌] 8. Video Element [HTML5 동상 강좌] 9.

A table of contents for Canvas use. Guias de Canvas Canvas User Guide for Faculty A table of contents links to Canvas tools for Faculty. Canvas Community Find answers, share ideas, and join groups. Fresno Canvas Support (844) 303-0348 Clovis Canvas Support (844) 629-6836 Reedley Canvas Support (844) 629-6837 Chat with Canvas Support (Student)

HTML5 Canvas HTML5 Notes for Professionals Canvas Notes for Professionals GoalKicker.com Free Programming Books Disclaimer This is an uno cial free book created for educational purposes and is not a liated with o cial HTML5 Canvas group(s) or company(s). All trademarks and registered trademarks are the property of their respective owners 100 pages

HTML5 Canvas HTML5 Notes for Professionals Canvas Notes for Professionals GoalKicker.com Free Programming Books Disclaimer This is an uno cial free book created for educational purposes and is not a liated with o cial HTML5 Canvas group(s) or company(s). All trademarks and registered trademarks are the property of their respective owners 100 pages

from: html5-canvas It is an unofficial and free html5-canvas ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official html5-canvas.

from: html5-canvas It is an unofficial and free html5-canvas ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official html5-canvas.

Recommends which HTML5 and CSS3 features are ready to use and which fallback to use when appropriate. Wikipedia "Comparison of Layout Engines (HTML5)" Charts show HTML5 support by the major browser lay-out engines. HTML5 Readiness An interesting visualization of growing support for HTML5 and CSS3 from 2008 to present. Validating HTML5 Documents

governing America’s indigent defense services has made people of color second class citizens in the American criminal justice system, and constitutes a violation of the U.S. Government's obligation under Article 2 and Article 5 of the Convention to guarantee “equal treatment” before the courts. 8. Lastly, mandatory minimum sentencing .