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 (ложь). Пролог хорошо подходит для автоматического перебора вариантов решений с возвратами. Язык не требует написания большого объемного кода и позволяет получать отличные результаты. |
Интересные материалы на сайте:
|
|