49306956



Вывод картинки на canvas
Автор Сообщение
all__ Не на форуме
Админ
*******

Сообщений: 854
Зарегистрирован: 01.2010
Сообщение: #1
Вывод картинки на canvas
В этом примере мы выводим картинку на 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(00cnv.widthcnv.height); // закрашиваем канву чёрным прямоугольником
    
var img = new Image(); // создаем объект - картинку
    
img.onload = function() { // после загрузки картинки
        
scr.drawImage(img100100200200); // выводим ее в координатах [100;100]
    
}
    
img.src "image.jpg"// имя картинки


Посмотреть пример.
Скачать исходники:
.zip  image-src.zip (Размер: 13.83 Кб / Загрузок: 66)

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


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