Embed Size (px)
DESCRIPTION
Delivered to Fort Collins Internet Pros Meetup Group - Sept 3, 2013.
Citation preview
CANVASintroduction to:
Tuesday, September 3, 13
Mark J. Morris @blurredbits
presented by:
September 3, 2013
Tuesday, September 3, 13
“Added in HTML5, the HTML <canvas> element is an element which can be used to draw graphics via scripting (usually Javascript).”
Tuesday, September 3, 13
Chrome 25+
Firefox 20+
Safari 5+
IE 9.0+
Opera 9.0+
Tuesday, September 3, 13
index.html
<!DOCTYPE html><html><head><title>Canvas Intro</title><link rel=”stylesheet” href=”css/style.css”>
</head><body>
<script src=”js/canvas.js”></script></body>
</html>
Tuesday, September 3, 13
index.html
<!DOCTYPE html><html><head><title>Canvas Intro</title><link rel=”stylesheet” href=”css/style.css”>
</head><body>
<script src=”js/canvas.js”></script></body>
</html>
<canvas id=”intro” width=300 height=150>
</canvas>
Tuesday, September 3, 13
index.html
<!DOCTYPE html><html><head><title>Canvas Intro</title><link rel=”stylesheet” href=”css/style.css”>
</head><body>
<script src=”js/canvas.js”></script></body>
</html>
<canvas id=”intro” width=300 height=150>
</canvas><p>Oh noes! No canvas support!</p>
Tuesday, September 3, 13
Tuesday, September 3, 13
Tuesday, September 3, 13
Tuesday, September 3, 13
basic canvas method
fillRect(float x, float y, float width, float height)
Tuesday, September 3, 13
Tuesday, September 3, 13
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);
Tuesday, September 3, 13
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);
Tuesday, September 3, 13
theCanvas.fillStyle = “orange”;
theCanvas.fillStyle = “#FFA500”;
theCanvas.fillStyle = “rgb(255,165,0)”;
theCanvas.fillStyle = “rgba(255,165,0,1)”;
Tuesday, September 3, 13
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);
Tuesday, September 3, 13
Tuesday, September 3, 13
Text Methods
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!
! 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);
var theCanvas = document.getElementById(‘intro’).getContext(‘2d’);
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!
! 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);
var theCanvas = document.getElementById(‘intro’).getContext(‘2d’);
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!
! 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);
var theCanvas = document.getElementById(‘intro’).getContext(‘2d’);
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!
! 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);
var theCanvas = document.getElementById(‘intro’).getContext(‘2d’);
Tuesday, September 3, 13
Tuesday, September 3, 13
Line Methods
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!! theCanvas.beginPath();! theCanvas.moveTo(50, 25);! theCanvas.lineTo(50, 125);! theCanvas.lineTo(150, 125);! theCanvas.closePath();! theCanvas.stroke();
var theCanvas = document.getElementById(‘intro’).getContext(‘2d’);
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!! theCanvas.beginPath();! theCanvas.moveTo(50, 25);! theCanvas.lineTo(50, 125);! theCanvas.lineTo(150, 125);! theCanvas.closePath();! theCanvas.stroke();
var theCanvas = document.getElementById(‘intro’).getContext(‘2d’);
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!! theCanvas.beginPath();! theCanvas.moveTo(50, 25);! theCanvas.lineTo(50, 125);! theCanvas.lineTo(150, 125);! theCanvas.closePath();! theCanvas.stroke();
var theCanvas = document.getElementById(‘intro’).getContext(‘2d’);
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!! theCanvas.beginPath();! theCanvas.moveTo(50, 25);! theCanvas.lineTo(50, 125);! theCanvas.lineTo(150, 125);! theCanvas.closePath();! theCanvas.stroke();
var theCanvas = document.getElementById(‘intro’).getContext(‘2d’);
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!! theCanvas.beginPath();! theCanvas.moveTo(50, 25);! theCanvas.lineTo(50, 125);! theCanvas.lineTo(150, 125);! theCanvas.closePath();! theCanvas.stroke();
var theCanvas = document.getElementById(‘intro’).getContext(‘2d’);
Tuesday, September 3, 13
Tuesday, September 3, 13
(2,1)
(2,4)
Tuesday, September 3, 13
(1.5,1)
(1.5,4)
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!! theCanvas.beginPath();! theCanvas.moveTo(50.5, 25.5);! theCanvas.lineTo(50.5, 125.5);! theCanvas.lineTo(150.5, 125.5);! theCanvas.closePath();! theCanvas.stroke();
var theCanvas = document.getElementById(‘intro’).getContext(‘2d’);
Tuesday, September 3, 13
Tuesday, September 3, 13
arcsarc(x, y, radius, startAngle, endAngle, anticlockwise)
bezierbezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
quadraticquadraticCurveTo(cp1x, cp1y, x, y)
Tuesday, September 3, 13
Image Methods
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
! var img = new Image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';! img.onload = function(){! ! theCanvas.drawImage(img,0,0);!! };
var theCanvas = document.getElementById(‘intro’).getContext(‘2d’);
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
! var img = new Image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';! img.onload = function(){! ! theCanvas.drawImage(img,0,0);!! };
var theCanvas = document.getElementById(‘intro’).getContext(‘2d’);
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
! var img = new Image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';! img.onload = function(){! ! theCanvas.drawImage(img,0,0);!! };
var theCanvas = document.getElementById(‘intro’).getContext(‘2d’);
Tuesday, September 3, 13
Tuesday, September 3, 13
scalingdrawImage(image, x, y, width, height)
slicingdrawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Tuesday, September 3, 13
GradientsAnimationsPatternsShadowsTransformationsCompositingVideoAudio
Tuesday, September 3, 13
Additional Resources
Tuesday, September 3, 13
Tuesday, September 3, 13
Tuesday, September 3, 13
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial
Tuesday, September 3, 13
Thursday 9/56:00pm
Crooked Cup
Tuesday, September 3, 13
Mark J. Morris @blurredbits
Thanks!
Tuesday, September 3, 13
![Introduction · Web view2.1.95[HTML5] Section 4.11.3 The template element79 2.1.96[HTML5] Section 4.11.4 The canvas element80 2.1.97[HTML5] Section 4.11.4.2 Serializing bitmaps to](https://img.pdfslide.us/doc/110x75/611a3b8e3178d064c06c0083/introduction-web-view-2195html5-section-4113-the-template-element79-2196html5.jpg)
