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

***all__*** · 14.07.2011 0:13

В этом примере мы выводим картинку на canvas.
Для начала создадим index.html , в котором обозначим канву размерностью 512x512:

PHP код:

<!DOCTYPE html>
<html>
<head>
    <title>Canvas</title>
    <script src="main.js" type="text/javascript"></script>
</head>
<body>
    <canvas width="512" height="512" id="cnv">
        Canvas не поддерживается.
    </canvas>
<script type="text/javascript">initMain();</script>

</body>
</html> 

Теперь создадим main.js:

PHP код:

function initMain(){ // запускается после загрузки index.html
    var cnv = document.getElementById('cnv'); // находим канву

    if (!cnv || !cnv.getContext) {
        return;
    }

    if (cnv && cnv.getContext) {
        var scr = cnv.getContext('2d'); // берем 2D контекст
        if (!scr) {
            return;
        }
    }
    
    scr.fillStyle = '#00'; // устанавливаем чёрный цвет заливки
    scr.fillRect(0, 0, cnv.width, cnv.height); // закрашиваем канву чёрным прямоугольником
    var img = new Image(); // создаем объект - картинку
    img.onload = function() { // после загрузки картинки
        scr.drawImage(img, 100, 100, 200, 200); // выводим ее в координатах [100;100]
    }
    img.src = "image.jpg"; // имя картинки
} 

Посмотреть пример.
Скачать исходники:
.zip

image-src.zip (Размер: 13.83 Кб / Загрузок: 189)

Похожие темы
Тема:		Автор	Ответов:	Просмотров:	Посл. сообщение
	Работа с canvas - простейший пример	all__	0	5 051	12.07.2011 14:30 Посл. сообщение: all__
	Вывод спрайта	all__	0	2 561	15.02.2010 0:17 Посл. сообщение: all__

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