Presentation is loading. Please wait.

Presentation is loading. Please wait.

Neal Stublen Why Use a Canvas?  Flexibility… Use of drawing primitives (lines, arcs, text) Direct access to element display pixels.

Similar presentations


Presentation on theme: "Neal Stublen Why Use a Canvas?  Flexibility… Use of drawing primitives (lines, arcs, text) Direct access to element display pixels."— Presentation transcript:

1 Neal Stublen

2

3

4 Why Use a Canvas?  Flexibility… Use of drawing primitives (lines, arcs, text) Direct access to element display pixels  Use a element in your HTML  Supply an “id” attribute to access the element from JavaScript

5 Canvas Coordinate System  Upper-left corner at (0, 0)  Lower right at (width, height)

6 Filling a Rectangle $('document').ready(function() { var canvas = document.getElementById('mycanvas'); var context = canvas.getContext('2d'); context.fillStyle = 'rgba(0, 0, 255, 0.5)'; context.fillRect(10, 10, 100, 100); context.strokeStyle = 'red'; context.strokeRect(10, 10, 100, 100); });

7 Filling with an Image $('document').ready(function() { var img = new Image(); img.src = ‘./images/bg-bike.png’; img.onload = function() { pattern = context.createPattern(img, 'repeat'); context.fillStyle = pattern; context.fillRect(10, 10, 100, 100); context.strokeRect(10, 10, 100, 100); }; });

8 Filling with a Gradient $('document').ready(function() { var gradient = context.createLinearGradient(0, 0, 0, 200); gradient.addColorStop(0, 'blue'); gradient.addColorStop(1, 'white'); context.fillStyle = gradient; context.fillRect(10, 10, 100, 100); context.strokeRect(10, 10, 100, 100) });

9 Drawing with Paths  We’ve seen drawing rectangles  We can draw other shapes, but we need to define a “path” for the shape

10 Drawing with Paths $('document').ready(function() { context.beginPath(); context.arc(50, 50, 30, 0, Math.PI * 2, true); context.closePath(); context.strokeStyle = 'red'; context.fillStyle = 'blue'; context.lineWidth = 3; context.fill(); context.stroke(); };

11 Experiment  Experiment inside the browser

12 Manipulating Pixels var image = document.getElementById('myimage'); context.drawImage(image, (canvas.width - image.width) / 2, (canvas.height - image.height) / 2);

13 Manipulating Pixels var imageData = context.getImageData(0, 0, canvas.width, canvas.height); var pixelData = imageData.data; for (var i = 0; i < pixelData.length; i += 4) { var r = pixelData[i]; var g = pixelData[i+1]; var b = pixelData[i+2]; var gray = r * g * b * 0.11; pixelData[i] = gray; pixelData[i+1] = gray; pixelData[i+2] = gray; } context.putImageData(imageData, 0, 0);

14 Displaying Text context.textAlign = 'left'; context.font = '18px LeagueGothic'; context.fillText('Hello!');

15

16 Scalable Vector Graphics  Describe vector graphics using XML  Preserves shape when size changes  Performs many tasks similar to canvas Gradients, paths, shapes, text  XML descriptions instead of JavaScript

17 An SVG Circle An SVG Circle <svg xmlns=

18 An SVG Rectangle

19 SVG Complexities  SVG drawings can become very complex  Inkscape – Free vector graphics editor  Raphael – JavaScript library for working with SVG

20 Why SVG?  SVG can provide a much smaller description of an image (smaller files) Rather than describing the RGBA values of each pixel, it can describe lines and shapes regardless of size  Scaling doesn’t produce artifacts No jagged edges

21 Canvas or SVG?  Canvas provides pixel manipulation  Canvas provides saving images to PNG and JPEG files  SVG provides DOM access to drawing elements  SVG has more tools

22

23 Steps to Drag and Drop  Set the draggable attribute on any elements you want to be draggable  Set an event listener for the dragstart event on any draggable elements  Set an event listener for the dragover and drop events on any elements that can accept draggable elements

24 Set Draggable  Set the draggable attribute on an element  This is not a boolean attribute

25 Watch for dragstart $('.src').bind('dragstart', function(event) { event.originalEvent.dataTransfer.setData('text/plain', event.target.getAttribute('id')); });

26 Watch for dragover $(‘.tgt').bind('dragover', function(event) { event.preventDefault(); });

27 Watch for drop $(‘.tgt').bind('drop', function(event) { var src = event.originalEvent.dataTransfer.getData("text/plain"); });

28 Cat and Mouse  HTML Herald supports drag and drop at the cat article Drag the mice onto the cat

29 Draggable Divs  Create a series of colored div elements that can be dragged onto other divs to change their color  Swap position of colored divs by dragging them onto one another


Download ppt "Neal Stublen Why Use a Canvas?  Flexibility… Use of drawing primitives (lines, arcs, text) Direct access to element display pixels."

Similar presentations


Ads by Google