Работа с canvas - простейший пример
Автор Сообщение
all__ Не на форуме
Админ
*******

Сообщений: 874
Зарегистрирован: 01.2010
Сообщение: #1
Работа с canvas - простейший пример
Это простейший пример работы с 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(00cnv.widthcnv.height); // рисуем чёрный прямоугольник размерами с канву.


Показать пример.
Исходники:
.zip  canvas-src.zip (Размер: 623 байт / Загрузок: 132)





Лучшая благодарность - "Мне нравится", +1 или Like! Вверху страницы.
12.07.2011 14:30
Вебсайт Найти все сообщения Цитировать это сообщение
Создать ответ 


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