View
473
Download
28
Category
Preview:
Citation preview
HTML 5 Canvas & SVG
ME Ofir Fridman FE Developer Love code, technology, sport
The HTML <canvas> element is used to draw graphics
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
What is HTML Canvas? What is SVG?
SVG stands for Scalable Vector Graphics
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
Canvas VS SVGCanvas SVGScript - Drawing via code Document - Drawing via XMLRendered pixel by pixel Scalable Vector Graphics
No support for event handlers Support for event handlers
Better performance Poor performance when to many items
Games Chart & Graphs Advertising
When to use an Canvas When to use an SVG
Logos Chart & Graphs Icons
Canvas & SVG Grid System(0,0)
X
Y
Canvas
Healow World Canvas Example<canvas id="canvas"> This Browser Not Support</canvas>
var canvasElement = document.getElementById("canvas");var canvas = canvasElement.getContext("2d");canvas.font = "50px arial";canvas.fillText("Hello World", 10, 50);// (text, x, y)
canvas{ border:1px solid; width: 50%; height: 50%}
HTML
JS
CSS
Canvas API Function
Canvas API Properties
API Logic Break DownPaths
Method Descriptionfill() Fills the current drawing (path)stroke() Actually draws the path you have definedbeginPath() Begins a path, or resets the current pathmoveTo() Moves the path to the specified point in the canvas, without creating a
lineclosePath() Creates a path from the current point back to the starting pointlineTo() Adds a new point and creates a line from that point to the last specified
point in the canvasclip() Clips a region of any shape and size from the original canvasquadraticCurveTo() Creates a quadratic Bézier curve
bezierCurveTo() Creates a cubic Bézier curve
arc() Creates an arc/curve (used to create circles, or parts of circles)arcTo() Creates an arc/curve between two tangentsisPointInPath() Returns true if the specified point is in the current path, otherwise false
Example to lineTolineTo signature context.lineTo(x,y);
var canvasElement = document.getElementById("canvas");var canvas = canvasElement.getContext("2d");
canvas.beginPath();canvas.moveTo(10, 10);canvas.lineTo(80, 10);canvas.stroke();
canvas.beginPath();canvas.moveTo(80, 10);canvas.lineTo(80, 100);canvas.stroke();
canvas.beginPath(); //begins a path, or resets the current pathcanvas.lineWidth = 5;canvas.strokeStyle = "red"canvas.moveTo(80, 100);canvas.lineTo(200, 100);canvas.stroke();
Example to rect
rect signature context.rect(x,y,width,height);
var canvasElement = document.getElementById("canvas");var canvas = canvasElement.getContext("2d");canvas.rect(20,20,100,100);
canvas.fillStyle="#0000FF";canvas.fill();// Fills the current drawing (path)
canvas.lineWidth = 5;canvas.strokeStyle = "#00FF00";canvas.stroke(); //Actually draws the path you have defined
Example to arc
arc signature context.arc(centerX,centerY,radius,startAngle,endAngle,counterclockwise);
Start angle
End angle
Center x,y
var canvasElement = document.getElementById("canvas");var canvas = canvasElement.getContext("2d");
var centerX = canvasElement.width / 2;var centerY = canvasElement.height / 2;var radius = 50;var startAngle = 0;var endAngle = 2 * Math.PI;
canvas.beginPath();canvas.arc(centerX, centerY, radius, startAngle, endAngle);canvas.stroke();
1 HTML Canvas element 1 moving arc 1 moving paddle (mouse\keyboard) 25 bricks colorful bricks
Canvas Breakout Game
SVG = Scalable Vector Graphics
Healow World SVG Example
<svg height="200" width="200"> <text x="50" y="50" fill="red">Healow World</text> Sorry, your browser does not support SVG.</svg>
HTML
Result
Example to polyline
<svg height="200" width="500"> <polyline points="20,20,100,20,100,120,200,120" style="fill:none;stroke:red;stroke-width:3" /></svg>
HTML
Result
Example to rect<svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> Sorry, your browser does not support SVG.</svg>
HTML
Result
Example to circle
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="blue" /> Sorry, your browser does not support SVG.</svg>
HTML
Result
Recommended