HTML5 CANVAS: IMAGES AND DRAWINGS - …cis.csuohio.edu/~sschung/CIS408/LectureWangch11b... · HTML5...

HTML5 CANVAS:IMAGES AND DRAWINGS

Part 2

Draw Shapes and Text on Canvas

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 1

In this lecture, you will learn:

how to write JavaScript to do the following on a canvas element• draw shapes

• draw text


rights reserved. 2

Shapes

• rectangles

• lines

• circles and arcs

• curves

• irregular shapes


rights reserved. 3

Rectangles


rights reserved. 4

Reminder

<!DOCTYPE html>

<html>

<head>

<title>Canvas Example</title>

</head>

<body>

<canvas id="gameCanvas" width="1136" height="640">

Your browser does not support canvas.

</canvas>

<script>

</script>

</body>

</html>


rights reserved. 5

We will add JavaScript here to add a

rectangle to the canvas element.

Add a filled rectangle on Canvas Element<canvas id="gameCanvas" width="1136" height="640">

Your browser does not support canvas.

</canvas>

<script>

var myCanvas =

document.getElementById("gameCanvas");

var myContext = myCanvas.getContext("2d");

myContext.fillStyle = "#FF0000";

myContext.fillRect(250, 70, 120, 40);

</script>© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 6

Set a color first. In this example, it's red.

Lines

Use the following methods in combination:

• context.moveTo(x, y);

• context.lineTo(x, y);


rights reserved. 7

How to use combination of moveTo() and lineTo()

• Think of using a pencil to draw a shape on paper

• moveTo() command is like moving the pencil to a location with the pencil up

• lineTo() command is like putting the pencil down on the paper and moving it to a location


rights reserved. 8

Say this is the canvas area with

width=1136 and height=640

(0, 0)

(1136, 640)© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 9

myContext.moveTo(376, 53);

myContext.lineTo(295, 246);





myContext.stroke();

(376, 53)


rights reserved. 10







myContext.stroke();

(295, 246)


rights reserved. 11







myContext.stroke();

(451, 239)


rights reserved. 12







myContext.stroke();

(376, 53)


rights reserved. 13







myContext.stroke();

(372, 227)


rights reserved. 14







myContext.stroke();

(372, 300)


rights reserved. 15







myContext.stroke();© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 16

Path and Stroke

• Path: • made up of one or more straight and/or curve segments

• invisible until applying stroke

• to start a path, use beginPath()


rights reserved. 17

Circles and Arcs

context.arc(x, y, radius, startAngle,

endAngle, counterClockwise);


rights reserved. 18

Circles and Arcs


rights reserved. 19

myContext.arc(270, 190, 30, 0, Math.PI*2);

myContext.arc(470, 190, 30, 0, Math.PI*2);

myContext.arc(370, 250, 230, Math.PI*0.1, Math.PI*0.9);

Curves

• Bezier curve• start point, end point

• 2 control points in-between

• Quadratic curve• start point, end point

• 1 control point in-between


rights reserved. 20

Bezier Curves


rights reserved. 21

Bezier Curves


rights reserved. 22

Bezier Curves


rights reserved. 23


myContext.bezierCurveTo(86, 311, 290, 310, 328, 110);

myContext.stroke();

start point

Bezier Curves


rights reserved. 24


myContext.bezierCurveTo(86, 311, 290, 310, 328, 110);

myContext.stroke();

end point2 control points

Quadratic Curves


rights reserved. 25

Quadratic Curves


rights reserved. 26

Quadratic Curves


rights reserved. 27


myContext.quadraticCurveTo(127, 327, 309, 312);

myContext.stroke();

start point

Quadratic Curves


rights reserved. 28


myContext.quadraticCurveTo(127, 327, 309, 312);

myContext.stroke();

end pointcontrol point

Complex Shapes Using Combination of Lines and Curves


rights reserved. 29

Complex Shapes Using Combination of Lines and Curves


rights reserved. 30

Irregular Shapes Using Combination of Lines and Curves


rights reserved. 31

quadratic curve

quadratic curve

bezier curve

bezier curve bezier curve

bezier curve

bezier curve

lines

Adobe Illustrator To JavaScript

• Plug-ins:• Drawscript (http://drawscri.pt/)

• Ai→Canvas (http://visitmix.com/labs/ai2canvas/).


rights reserved. 32

Example:Vector Graphics Created in Adobe Illustrator and Converted to JavaScript to Draw on Canvas


rights reserved. 33

Draw Text on Canvas

context.fillText(textString, x,

y);


rights reserved. 34

Example


rights reserved. 35

myContext.font = "60px Arial";

myContext.fillText("Welcome!", 200, 100);

200

100

HTML5 CANVAS: IMAGES AND DRAWINGS - …cis.csuohio.edu/~sschung/CIS408/LectureWangch11b... · HTML5...

Documents

Transcript of HTML5 CANVAS: IMAGES AND DRAWINGS - …cis.csuohio.edu/~sschung/CIS408/LectureWangch11b... · HTML5...