19. HTML5 Canvas [fillStyle, fillText, loadImage,drawImage]

Hello Canvas!!

How to use fillStyle, fillText, loadImage

소스보기해서 주석을 읽어보자

[SOURCE VIEW]

<canvas id="myCanvas" width="600" height="400" style="border:1px solid #000000"> If you can see this, I'm sorry. <br /> You need to get <a href="https://www.google.com/chrome/browser/desktop/index.html"> Google Chrome browser</a> to see HTNL5 Canvas </canvas> <script> function loadImages(sources, callback) { var images = {}; var loadedImages = 0; var numImages = 0; // get num of sources for(var src in sources) { numImages++; } for(var src in sources) { images[src] = new Image(); //이미지 객체 생성 create object of image images[src].onload = function() { if(++loadedImages >= numImages) { callback(images); } }; images[src].src = sources[src]; } } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var sources = { SouthDoor: 'http://cfs.tistory.com/custom/blog/156/1560470/skin/images/sdoor.jpg', darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg', yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg' }; loadImages(sources, function(images) { context.drawImage(images.SouthDoor, 100, 30, 200, 137); //(image,시작점 start point_x, 시작점 start point_y, 너비 width of image, 높이 height of image) context.drawImage(images.SouthDoor, 350, 250, 150, 100); context.drawImage(images.yoda, 350, 55, 93, 104); context.drawImage(images.darthVader, 50, 220, 200, 137); }); context.font = "40pt Calibri"; context.lineWidth = 3; context.strokeStyle = "blue"; context.strokeText("SouthDoor", 50, 210); context.strokeText("SouthDoor", 350, 390); context.font = "bold 40pt Tahoma"; context.fillStyle = "green"; context.fillText("DarthVader", 20, 390); context.fillText("Yoda", 350, 210); </script>

If you can see this, I'm sorry.
You need to get Google Chrome browser to see HTNL5 Canvas