www.gcmsite.ru

Новости Программы PHP-скрипты Статьи Числа
Услуги Резюме Игры Автомобили Поиск

СИСТЕМНОЕ И ВЕБ-ПРОГРАММИРОВАНИЕ
компьютерная техника, игры

Нужна программа, скрипт или сайт? Анализ сайта или оптимизация? Копирайт или рерайт текстов? Заявка на выполнение работ.

HTML5 - canvas - пример рисования на странице с помощью JavaScript

Ваш браузер не поддерживает рисование.

Красиво, правда? И совсем не сложно.

Нужно использовать JavaScript. Устанавливаем связь с тегом <canvas> и рисуем простые объекты, используя заливку. Что значат те или иные функции рисования, можно посмотреть в справочнике по JavaScript. Логика программы описана в комментариях в самом листинге. Рисуем плоский двумерный рисунок, используя геометрические фигуры прямоугольник, круг и линию.

Вот код рисунка

  <script> 
   window.onload = function() {

   // рисуем домик небо траву и солнце

    var drawingCanvas = document.getElementById('mypicture');
    if(drawingCanvas && drawingCanvas.getContext) {
     var context = drawingCanvas.getContext('2d');
     // Рисуем небо 
     context.strokeStyle = "#000";
     context.fillStyle = "#aef";
     context.beginPath();
     context.fillRect(0,0,300,300);
     context.closePath();
     context.stroke();
     context.fill();


     // Рисуем траву 
     context.strokeStyle = "#000";
     context.fillStyle = "#5c5";
     context.beginPath();
     context.fillRect(0,250,300,300);
     context.closePath();
     context.stroke();
     context.fill();

    // рисуем стену домика
     context.strokeStyle = "#000";
     context.fillStyle = "#ca5";
     context.beginPath();
     context.fillRect(50,150,100,100);
     context.closePath();
     context.stroke();
     context.fill();
     
    // рисуем окошко домика
     context.strokeStyle = "#000";
     context.fillStyle = "#000";
     context.beginPath();
     context.fillRect(79,178,43,43);
     context.closePath();
     context.stroke();
     context.fill();

     context.strokeStyle = "#000";
     context.fillStyle = "#ff0";
     context.beginPath();
     context.fillRect(80,200,20,20);
     context.closePath();
     context.stroke();
     context.fill();
     context.strokeStyle = "#000";
     context.fillStyle = "#ff0";
     context.beginPath();
     context.fillRect(101,200,20,20);
     context.closePath();
     context.stroke();
     context.fill();
     context.strokeStyle = "#000";
     context.fillStyle = "#ff0";
     context.beginPath();
     context.fillRect(80,179,20,20);
     context.closePath();
     context.stroke();
     context.fill();
     context.strokeStyle = "#000";
     context.fillStyle = "#ff0";
     context.beginPath();
     context.fillRect(101,179,20,20);
     context.closePath();
     context.stroke();
     context.fill();


    // рисуем трубу домика
     context.strokeStyle = "#000";
     context.fillStyle = "#f00";
     context.beginPath();
     context.fillRect(65,100,10,30);
     context.closePath();
     context.stroke();
     context.fill();


    // рисуем крышу
     context.beginPath();
     context.strokeStyle = "#000";
     context.fillStyle = "#ca5";
     context.moveTo(50, 150);
     context.lineTo(100, 100);
     context.moveTo(100, 100);
     context.lineTo(150, 150);
     context.moveTo(150, 150);
     context.lineTo(50, 150);
     context.closePath();
     context.stroke();
     context.fill();

     // рисуем дерево
     context.strokeStyle = "#000";
     context.fillStyle = "#cc0";
     context.beginPath();
     context.fillRect(235,150,10,100);
     context.closePath();
     context.stroke();
     context.fill();

     // Рисуем окружность 
     context.strokeStyle = "#000";
     context.fillStyle = "#0f0";
     context.beginPath();
     context.arc(240,150,40,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();

     // Рисуем окружность 
     context.strokeStyle = "#000";
     context.fillStyle = "#ff6";
     context.beginPath();
     context.arc(215,150,5,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     context.fillStyle = "#fa6";
     context.beginPath();
     context.arc(230,120,5,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     context.fillStyle = "#aa6";
     context.beginPath();
     context.arc(250,170,5,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();

    // птичка
     context.beginPath();
     context.moveTo(200,50);
     context.quadraticCurveTo(205,70,210,50);
     context.stroke();
     context.beginPath();
     context.moveTo(180,40);
     context.quadraticCurveTo(185,60,190,40);
     context.stroke();
     context.beginPath();
     context.moveTo(230,40);
     context.quadraticCurveTo(235,60,240,40);
     context.stroke();

    }

   }
  </script>
  <canvas id="mypicture" width="300" height="300">
    <p>Ваш браузер не поддерживает рисование.</p>
  </canvas>




Prolog — это язык логического программирования. Он является декларативным языком: вся стуктура программы представлена в виде правил и фактов. На нем можно строить экспертные системы, генерирующие ответы вида true (истина) или false (ложь). Пролог хорошо подходит для автоматического перебора вариантов решений с возвратами. Язык не требует написания большого объемного кода и позволяет получать отличные результаты.

Интересные материалы на сайте:

Рейтинг@Mail.ru     Автор, разработчик: Шаров Евгений   (gcmsite@yandex.ru)
(c) 2000-2017 GCM-Site - системное и веб-программирование
Цитирование материалов сайта возможно только при наличии гиперссылки