отзывы

Восстановление
пароля

Готово

Назад

Основы программирования
Успеха достигает тот, кто способен на время отодвинуть свои увлечения
Программист - профессия будущего!

<canvas>

  • 133

  • 0

  • Нравится

    0

  • Код:124251614500

При помощи JavaScript можно рисовать...
Задайте вопрос продавцу

<canvas>

грн. / шт.

Компания: Уроки программирования
Телефон: +38(093)43-03-164
Адрес: Киевская область г. Киев, с. Красное
Оставьте свой номер
<canvas>

грн. / шт.

Оставьте свой номер телефона и представитель компании с вами свяжется.

     Выводить изображения, трансформировать их и менять свойства

Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.

 

 

Синтаксис

<canvas id="идентификатор">
</canvas>

 

 

Атрибуты

height

Задает высоту холста. По умолчанию 300 пикселов.

width

Задает ширину холста. По умолчанию 150 пикселов.

Также для этого тега доступны универсальные атрибуты и события.

 

 

Закрывающий тег - Обязателен.

 

<!DOCTYPE html>
<html>
    <head>
        <title>canvas</title>
        <meta charset="utf-8">
        <script> 
            window.onload = function() {
                var drawingCanvas = document.getElementById('smile');
                if(drawingCanvas && drawingCanvas.getContext) {
                    var context = drawingCanvas.getContext('2d');
                    // Рисуем окружность 
                    context.strokeStyle = "#000";
                    context.fillStyle = "#fc0";
                    context.beginPath();
                    context.arc(100,100,50,0,Math.PI*2,true);
                    context.closePath();
                    context.stroke();
                    context.fill();
                    // Рисуем левый глаз 
                    context.fillStyle = "#fff";
                    context.beginPath();
                    context.arc(84,90,8,0,Math.PI*2,true);
                    context.closePath();
                    context.stroke();
                    context.fill();
                    // Рисуем правый глаз 
                    context.beginPath();
                    context.arc(116,90,8,0,Math.PI*2,true);
                    context.closePath();
                    context.stroke();
                    context.fill();
                    // Рисуем рот
                    context.beginPath();
                    context.moveTo(70,115);
                    context.quadraticCurveTo(100,130,130,115);
                    context.quadraticCurveTo(100,150,70,115); 
                    context.closePath();
                    context.stroke();
                    context.fill();
                }
            }
        </script>
    </head>
    <body>
        <canvas id="smile" width="200" height="200">
            <p>Ваш браузер не поддерживает рисование.</p>
        </canvas>
    </body>
</html>

 

<!-- Размещаем информацию для пользователей -->
 
<canvas>
  Ваш браузер не поддерживает элемент <canvas>
</canvas>
 
<!-- или можно поместить картинку равную размеру элемента -->
 
<canvas>
  <img src="image1.png">
</canvas>

 

 

Добавление на страницу

Элемент <canvas> является обычным HTML-элементом:

 
<canvas id="test" width="600" height="200"></canvas>

Наш пример имеет три атрибута: id, width и height. Атрибут id (идентификатор) дает нашему элементу уникальное имя - test, это нужно для того, чтобы язык сценариев мог получить к нему доступ. Атрибут width определяет количество пикселей по горизонтали, которое <canvas> будет занимать на веб-странице. Аналогичным образом height определяет вертикальную занимаемую область. Таким образом, браузер сможет выделить пространство нужного размера на веб-странице, согласно указанным значениям.

 

 

По умолчанию он является прозрачным и не имеет рамки, то есть он просто является пустым пространством в окне браузера, в котором можно рисовать.

 

 

Использование CSS для указания размера

 

Возможно у вас возник вопрос: можно ли использовать CSS для указания размера элемента <canvas> вместо использования атрибутов width и height?

Можно, однако указание ширины и высоты с помощью CSS будет иметь не тот эффект, который вы ожидаете. По умолчанию элемент имеет ширину 300 пикселей и высоту 150 пикселей. Если не задать атрибуты width и height, то элемент получит размеры по умолчанию. Если затем задать размеры, используя CSS, допустим, 600х200 пикселей, то <canvas> размером 300х150 пикселей подвергнется масштабированию в соответствии с заданными параметрами, равно как и все, что будет в нем нарисовано. Это сродни масштабированию изображения путем задания для него новых ширины и высоты, которые больше или меньше, чем реальные ширина и высота. А при увеличении изображения будет наблюдаться пикселизация, не так ли?

То же самое произойдет и в случае с <canvas>. Элемент шириной 300 пикселей, масштабируемый до 600 пикселей, будет иметь прежнее количество пикселей, но растянутых вдвое. При использовании атрибутов width и height можно задавать размеры для элемента, которые будут больше (или меньше), чем 300х150 пикселей, и все создаваемое в нем будет отображаться нормально. Таким образом, использовать CSS для настройки размера будет целесообразно, если нужно действительно масштабировать элемент.

 

 

Работа со старыми версиями браузеров

Не все браузеры поддерживают тег <canvas>, поэтому для информирования пользователей, чьи браузеры не поддерживают его, можно поместить между открывающим и закрывающим тегом специальное сообщение или альтернативное содержимое, которое будет отображаться только в том случае, если тег не поддерживается, в ином случае содержимое элемента будет игнорироваться:

 

<!-- Размещаем информацию для пользователей -->
 
<canvas>
  Ваш браузер не поддерживает элемент <canvas>
</canvas>
 
<!-- или можно поместить картинку равную размеру элемента -->
 
<canvas>
  <img src="image1.png">
</canvas>

 

<!DOCTYPE html>
<html>
 <head>
  <title>canvas</title>
  <meta charset="utf-8">
  <script> 
   window.onload = function() {
    var drawingCanvas = document.getElementById('smile');
    if(drawingCanvas && drawingCanvas.getContext) {
     var context = drawingCanvas.getContext('2d');
     // Рисуем окружность 
     context.strokeStyle = "#000";
     context.fillStyle = "#fc0";
     context.beginPath();
     context.arc(100,100,50,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Рисуем левый глаз 
     context.fillStyle = "#fff";
     context.beginPath();
     context.arc(84,90,8,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Рисуем правый глаз 
     context.beginPath();
     context.arc(116,90,8,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Рисуем рот
     context.beginPath();
     context.moveTo(70,115);
     context.quadraticCurveTo(100,130,130,115);
     context.quadraticCurveTo(100,150,70,115); 
     context.closePath();
     context.stroke();
     context.fill();
    }
   }
  </script>
 </head>
 <body>
  <canvas id="smile" width="200" height="200">
    <p>Ваш браузер не поддерживает рисование.</p>
  </canvas>
 </body>
</html>



Атрибуты

height:

Определяет высоту элемента в пикселях (например: "400"). Значение по умолчанию - "150".

Примечание: каждый раз при смене высоты или ширины элемента <canvas>, его содержимое будет полностью стерто (смотрите пример в атрибуте width).

width:

Определяет ширину элемента в пикселях (например: "150"). Значение по умолчанию - "300".

Отзывов нет

Публикация отзыва производится после предварительной модерации

Отправить

Случайные статьи