More Related Content Similar to Introduction to HTML5 Canvas (20) 3. “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
19. 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
20. 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
21. 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
22. 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
25. 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
26. 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
27. 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
28. 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
29. 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
33. 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
35. arcs
arc(x, y, radius, startAngle, endAngle, anticlockwise)
bezier
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
quadratic
quadraticCurveTo(cp1x, cp1y, x, y)
Tuesday, September 3, 13
37. 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
38. 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
39. 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
41. scaling
drawImage(image, x, y, width, height)
slicing
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Tuesday, September 3, 13
