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

***all__*** · 12.07.2011 14:30

Это простейший пример работы с canvas, все что он делает, это закрашивает канву чёрным цветом, сразу после загрузки страницы.
Для начала создадим index.html, в котором сошлемся на скрипт main.js, который будет выполнять основную работу.
Обозначим канву размерностью 512x512 и в конце страницы вызовем функцию initMain() из main.js

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(){ // вызывается с основной страницы
    var cnv = document.getElementById('cnv'); // находим canvas в html

    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); // рисуем чёрный прямоугольник размерами с канву.
} 

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

canvas-src.zip (Размер: 623 байт / Загрузок: 75)

Похожие темы
Тема:		Автор	Ответов:	Просмотров:	Посл. сообщение
	Post запрос - Пример 1	all__	40	18 767	25.08.2011 14:54 Посл. сообщение: Гость
	Вывод картинки на canvas	all__	0	2 423	14.07.2011 0:13 Посл. сообщение: all__
	Post запрос timeout - Пример 2	all__	77	8 688	16.02.2010 17:00 Посл. сообщение: all__
	Простейший пример DOM (Document Object Model)	all__	52	6 685	16.02.2010 16:33 Посл. сообщение: all__

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