Каскадный режим | Линейный режим

***all__*** · 15.02.2010 0:17

Собрал пример еще в пятницу, сейчас вот вспомнил..

Создаем sprite.html

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<title>Sprite Demo</title>

<body>

<canvas id="canvas" height="320" width="320" style="background:#000;"></canvas> 

<div style="display:none;">

    <img src="sprite.png" id="sprite"/>

</div>

<script type="text/javascript" src="sprite.js"></script>

</body>

</html>

Создаем sprite.js

Код:

var sprite = document.getElementById('sprite'); //берем изображение спрайта

var ctx = document.getElementById('canvas').getContext('2d'); //инициализируем канву

ctx.clearRect(0,0,320,320); // чистим область канвы, в данном случае всю канву

ctx.drawImage(sprite,100,100); // выводим спрайт на канве в координатах [100,100]

Не забудьте поместить в директорию проекта sprite.png, в прикреплении рабочий пример.

Похожие темы
Тема:		Автор	Ответов:	Просмотров:	Посл. сообщение
	Вывод картинки на canvas	all__	0	2 113	14.07.2011 0:13 Посл. сообщение: all__

Каскадный режим \| Линейный режим Вывод спрайта
Автор	Сообщение