CANVAS - Meetupfiles.meetup.com/981826/intro_canvas.pdf · js/canvas.js window.onload =...

Transcript of CANVAS - Meetupfiles.meetup.com/981826/intro_canvas.pdf · js/canvas.js window.onload =...

$Page 1: CANVAS - Meetupfiles.meetup.com/981826/intro_canvas.pdf · js/canvas.js window.onload = canvasApp(); function canvasApp {}!! theCanvas.fillStyle = "blue";!theCanvas.font = "30px Arial";!theCanvas.textBaseline$

CANVASintroduction to:

Tuesday, September 3, 13

Mark J. Morris @blurredbits

presented by:

September 3, 2013

“Added in HTML5, the HTML <canvas> element is an element which can be used to draw graphics via scripting (usually Javascript).”

Chrome 25+

Firefox 20+

Safari 5+

IE 9.0+

Opera 9.0+

index.html

<!DOCTYPE html><html><head><title>Canvas Intro</title><link rel=”stylesheet” href=”css/style.css”>

</head><body>

</html>

index.html

</head><body>

</html>

</canvas>

index.html

</head><body>

</html>

</canvas><p>Oh noes! No canvas support!</p>

basic canvas method

fillRect(float x, float y, float width, float height)

js/canvas.js

window.onload = canvasApp();

function canvasApp () {

}

var theCanvas = document.getElementById(‘intro’).getContext(‘2d’);

theCanvas.fillStyle = "rgb(160, 160, 160)";theCanvas.fillRect(0, 0, 50, 50);

js/canvas.js

}

theCanvas.fillStyle = “orange”;

theCanvas.fillStyle = “#FFA500”;

theCanvas.fillStyle = “rgb(255,165,0)”;

theCanvas.fillStyle = “rgba(255,165,0,1)”;

js/canvas.js

}

Text Methods

js/canvas.js

}

!

! theCanvas.fillStyle = "blue";! theCanvas.font = "30px Arial";! theCanvas.textBaseline = "top";! theCanvas.fillText("Fort Collins", 0, 0);! theCanvas.fillStyle = "red";! theCanvas.fillText("Internet", 0, 50);! theCanvas.fillStyle = "blue";! theCanvas.fillText("Pros",0,100);

js/canvas.js

}

!

js/canvas.js

}

!

js/canvas.js

}

!

Line Methods

js/canvas.js

}

!! theCanvas.beginPath();! theCanvas.moveTo(50, 25);! theCanvas.lineTo(50, 125);! theCanvas.lineTo(150, 125);! theCanvas.closePath();! theCanvas.stroke();

js/canvas.js

}

js/canvas.js

}

js/canvas.js

}

js/canvas.js

}

(2,1)

(2,4)

(1.5,1)

(1.5,4)

js/canvas.js

}

!! theCanvas.beginPath();! theCanvas.moveTo(50.5, 25.5);! theCanvas.lineTo(50.5, 125.5);! theCanvas.lineTo(150.5, 125.5);! theCanvas.closePath();! theCanvas.stroke();

arcsarc(x, y, radius, startAngle, endAngle, anticlockwise)

bezierbezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

quadraticquadraticCurveTo(cp1x, cp1y, x, y)

Image Methods

js/canvas.js

}

! var img = new Image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';! img.onload = function(){! ! theCanvas.drawImage(img,0,0);!! };

https://mdn.mozillademos.org/files/5397/rhino.jpg'