introduction to html5 canvas
Post on 10-May-2015
1.386 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related