Tô màu nền - viết chữ cho canvas

Your browser does not support the HTML5 canvas tag. Your browser does not support the HTML5 canvas tag. Your browser does not support the HTML5 canvas tag.

Làm ảnh động bằng canvas

Trước tiên tạo một vùng canvas, và gạn ID cho nó
Dùng JS để điều khiển ID canvas. Tham khảo ở đâyhoặcở đây

Làm ảnh động

B1: Bạn phải tạo vùng vẽ với một kích thước tùy ý :
----------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title> Animation Example! </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>

<body>
<canvas id="canvas" width="60px" height="60px"></canvas>
</body>
</html>
----------------------------------------------------
B2: Bạn phải tạo một ảnh chứa các Sprite (hoạt cảnh nhấn) của chuyển động:
----------------------------------------------------
------------------------------------------------------
B3: Bạn phải tạo một biến mảng, và gán giá trị cho biến mảng. (Rõ ràng các giá trị của biến mảng chứa các tọa độ của Sprite.
Các biến mảng được tự động đánh số từ trái qua phải, từ trên xuống dưới. (Ví dụ mảng sau đây gồm 16 phần tử)
------------------------------------------------------
var spriteSheet = [
{"x": 0, "y": 0, "w": sprW, "h":sprH},{"x": sprW, "y": 0, "w": sprW, "h":sprH},{"x": 2*sprW, "y": 0, "w": sprW, "h":sprH},{"x": 3*sprW, "y": 0, "w": sprW, "h":sprH},
{"x": 0, "y": sprH, "w": sprW, "h":sprH}, {"x": sprW, "y": sprH, "w": sprW, "h":sprH}, {"x": 2*sprW, "y": sprH, "w": sprW, "h":sprH}, {"x": 3*sprW, "y": sprH, "w": sprW, "h":sprH},
{"x": 0, "y": 2*sprH, "w": sprW, "h":sprH}, {"x": sprW, "y": 2*sprH, "w": sprW, "h":sprH}, {"x": 2*sprW, "y": 2*sprH, "w": sprW, "h":sprH}, {"x": 3*sprW, "y": 2*sprH, "w": sprW, "h":sprH},
{"x": 0, "y": 3*sprH, "w": sprW, "h":sprH}, {"x": sprW, "y": 3*sprH, "w": sprW, "h":sprH}, {"x": 2*sprW, "y": 3*sprH, "w": sprW, "h":sprH}, {"x": 3*sprW, "y": 3*sprH, "w": sprW, "h":sprH},
];
--------------------------------------------------------
B4: Cuối cùng là vẽ ảnh với thông số của biến mảng:
--------------------------------------------------------
ctx.drawImage(img, spriteSheet[currentID].x, spriteSheet[currentID].y, spriteSheet[currentID].w, spriteSheet[currentID].h, 0, 0, sprW, sprH);
--------------------------------------------------------

SAU ĐÂY LÀ CODE HOÀN CHỈNH - SƯU TẦM

html:
--------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title> Animation Example! </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>

<body>
<canvas id="canvas" width="60px" height="60px"></canvas>
</body>
</html>
---------------------------------------------------------
File js : có tên "main.js" đặt cùng thư mục với file html
---------------------------------------------------------
/** Animation example
*
* Edit by Sói Nhi dựa trên code của Nguyen Tai Hai (lấy ở bài viết http://vietgamedev.net/blog/171/html5-animating-sprites-c%C3%A1ch-t%E1%BA%A1o-%E1%BA%A3nh-%C4%91%E1%BB%99ng-tr%C3%AAn-game-canvas/)
*  (http://vietgamedev.net/soinhi/)                 
* Code được viết lại 1 cách ngắn gọi nhất cách dùng Sprite Sheet :D
*
**/

$(document).ready(function(){
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();

var sprW = 60;
var sprH = 60;
var currentID = 0;
var spriteSheet = [
{"x": 0, "y": 0, "w": sprW, "h":sprH},{"x": sprW, "y": 0, "w": sprW, "h":sprH},{"x": 2*sprW, "y": 0, "w": sprW, "h":sprH},{"x": 3*sprW, "y": 0, "w": sprW, "h":sprH},
{"x": 0, "y": sprH, "w": sprW, "h":sprH}, {"x": sprW, "y": sprH, "w": sprW, "h":sprH}, {"x": 2*sprW, "y": sprH, "w": sprW, "h":sprH}, {"x": 3*sprW, "y": sprH, "w": sprW, "h":sprH},
{"x": 0, "y": 2*sprH, "w": sprW, "h":sprH}, {"x": sprW, "y": 2*sprH, "w": sprW, "h":sprH}, {"x": 2*sprW, "y": 2*sprH, "w": sprW, "h":sprH}, {"x": 3*sprW, "y": 2*sprH, "w": sprW, "h":sprH},
{"x": 0, "y": 3*sprH, "w": sprW, "h":sprH}, {"x": sprW, "y": 3*sprH, "w": sprW, "h":sprH}, {"x": 2*sprW, "y": 3*sprH, "w": sprW, "h":sprH}, {"x": 3*sprW, "y": 3*sprH, "w": sprW, "h":sprH},
];
var img;
init();
function init()
{
img = new Image();
img.src = "sprite.png";
if(typeof game_loop != "undefined")
clearInterval(game_loop);
game_loop = setInterval(paint, 60);
}

function paint()
{
if (currentID < spriteSheet.length - 1 )
currentID ++;
else
currentID = 0;
ctx.clearRect(0,0, w, h);
ctx.drawImage(img, spriteSheet[currentID].x, spriteSheet[currentID].y, spriteSheet[currentID].w, spriteSheet[currentID].h, 0, 0, sprW, sprH);
}
})