HTML5 Canvas - Let's Draw!
-
Upload
phil-reither -
Category
Technology
-
view
3.219 -
download
3
description
Transcript of HTML5 Canvas - Let's Draw!
![Page 1: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/1.jpg)
HTML5 Canvas
![Page 2: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/2.jpg)
![Page 3: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/3.jpg)
![Page 4: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/4.jpg)
![Page 5: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/5.jpg)
The canvas isa 2d bitmap.
![Page 6: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/6.jpg)
No layers.No undo.No objects.No moving stuff.
![Page 7: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/7.jpg)
http://rawkes.com/lab/google-balls-logo
![Page 8: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/8.jpg)
http://blog.nihilogic.dk/2008/04/javascript-wolfenstein-3d.html
![Page 9: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/9.jpg)
How can I
create a
canvas?
![Page 10: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/10.jpg)
var canvas = document.getElementsById('a');
var ctx = canvas.getContext('2d');
JavaScript
<canvas id="a">fallback txt</canvas>HTML
![Page 11: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/11.jpg)
I draw
squares.
![Page 12: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/12.jpg)
ctx.fillStyle = 'blue';ctx.fillRect(0, 0, 150, 50);
ctx.strokeStyle = '#c66';ctx.lineWidth = 1;ctx.strokeRect(0.5, 60.5, 150, 50);
x width
height
y
context
![Page 13: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/13.jpg)
I want to
draw an
image!
![Page 14: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/14.jpg)
var img = new Image();img.onload = function() { ctx.drawImage(img, 0, 0);};img.src = 'nakedrobot.png';
x
when loaded
create image
y
image url
![Page 15: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/15.jpg)
how can you
draw text?
![Page 16: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/16.jpg)
ctx.font = 'bold 40px sans-serif';ctx.fillText('hello kitty', 5, 40);
x
css properties
y
hello kitty
![Page 17: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/17.jpg)
bring me the pixels!
![Page 18: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/18.jpg)
var w = canvas.width;var h = canvas.height;
var img = ctx.createImageData(w, h);for (var x = 0; x < w; x++) { for (var y = 0; y < h; y++) {
// each pixel has four values var idx = (x + y * w) * 4; // 0 red, 1 green, 2 blue, 3 alpha img.data[idx + 0] = x; img.data[idx + 1] = 255-x; img.data[idx + 2] = 0; img.data[idx + 3] = 255; }} ctx.putImageData(img, 0, 0); write to canvas
new image array
result
![Page 19: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/19.jpg)
http://media.chikuyonok.ru/ambilight/
![Page 20: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/20.jpg)
close pixealtehttp://desandro.com/resources/close-pixelate/
![Page 21: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/21.jpg)
function tick() { doKeyboard(); updatePlayer(); doAI(); draw(); audio(); }var fps = 30;setInterval(tick, 1000/fps);
Animation
![Page 22: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/22.jpg)
get input
updatedraw
every 30ms
![Page 23: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/23.jpg)
function tick() { doKeyboard(); updatePlayer(); doAI(); draw(); audio();}
var fps = 30;setInterval(tick, 1000/fps);
![Page 24: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/24.jpg)
How cani Save an Image?
![Page 25: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/25.jpg)
var img = document. getElementsByTagName('img')[0];
var canvasImg = canvas.toDataURL("image/png");
img.src = canvasImg;
canvas image
“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt...”
returns
![Page 26: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/26.jpg)
67%Browser Support
![Page 28: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/28.jpg)
http://weavesilk.com/
![Page 29: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/29.jpg)
Summary Canvas<canvas> is a new 2d bitmap html element. you can draw primitives, images and pixels. There are no layers or object. If a pixel gets a new color, the old color is overwritten and lost.
A canvas is not “sandboxed” like flash and can be accessed and drawn on with javascript.
![Page 30: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/30.jpg)
Material UsedBanksy “Have a Break” http://www.flickr.com/photos/loungerie/4109421950/
Banksy “Flowing off” http://www.flickr.com/photos/loungerie/4109420324/
Banksy “They’re Coming” http://www.flickr.com/photos/97041449@N00/4115205218/
Bansky “Tourqay Robot” http://en.wikipedia.org/wiki/File:Banksy_Torquay_robot_crop.jpg
Banksy “You have got to be kidding me” http://www.banksy.co.uk/
Banksy “follow your Dream” http://www.flickr.com/photos/thomashawk/6343586111/
Banksy “nola” http://www.flickr.com/photos/eddiedangerous/3045255243/
Banksy “Flower Pollard Street” http://www.flickr.com/photos/eddiedangerous/1800573742/
Banksy “what are you looking at?” http://www.flickr.com/photos/nolifebeforecoffee/124659356/
Banksy “Man and Picture of a dog” http://www.flickr.com/photos/atomicshed/141462789/
Banksy “Anti-Capitalism for sale” http://www.flickr.com/photos/jcodysimms/246024687/
![Page 31: HTML5 Canvas - Let's Draw!](https://reader035.fdocuments.us/reader035/viewer/2022081802/5404ebe88d7f729b768b4989/html5/thumbnails/31.jpg)
Material Used3d teapot model http://resumbrae.com/ub/dms423_f08/10/
Metal Teapot http://www.flickr.com/photos/11273631@N08/2867342497/
furry teapot http://www.flickr.com/photos/11273631@N08/2867342461/
Television Icon http://thenounproject.com/noun/television/#icon-No416
Graphics Card http://www.flickr.com/photos/43779660@N00/218093887/
Banksy “under the Carpet” http://www.flickr.com/photos/acb/147223287/
Boxing http://www.flickr.com/photos/51035655711@N01/2826228569/