Scribd Logo
Upload

Welcome to Scribd!

  • Java Canvas

    Uploaded by

    Софія Панченко
    1 views12 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    1 views12 pages

    Java Canvas

    Uploaded by

    Софія Панченко

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 12

    Javascript

    Об'єкт canvas
    Для малювання в javascript перш за все необхідно додати об'єкт canvas,
    який імітує «полотно» художника.

    Даний об'єкт підтримується всіма браузерами сучасних версій, але


    деякі застарілі версії не підтримують його.

    Значенням атрибута id також доречно призначити «canvas»:


    <Canvas id = "canvas" > … </ Canvas>

    Головним методом об'єкта canvas є метод getContext (), який


    використовується для отримання основних функцій малювання.

    У методі один параметр, який вказує на підтримку типу графіки (2d


    або 3d).

    Додамо javascript-код зі зверненням до об'єкту canvas і установкою


    підтримки 2d-графіки:

    var canvas = document.getElementById('canvas');


    var ctx = canvas.getContext('2d');
    Відлік координатної площині знаходиться в
    лівому верхньому кутку об'єкта canvas:

    Canvas підтримує малювання тільки


    однієї фігури - прямокутника. Інші фігури
    можуть вийти з прямих і точок.

    Малювання прямокутника:
    Залитий кольором прямокутник:
    fillRect (x, y, width, height)
    Прямокутний контур:
    strokeRect (x, y, width, height)
    Очищення прямокутної області (прозорий прямокутник):
    clearRect (x, y, width, height)

    ВИБІР КОЛЬОРУ В CANVAS


    В системі RGB без вказівки рівня прозорості:
    fillStyle = 'rgb (0-255, 0-255, 0-255)';
    В системі RGB із зазначенням рівня прозорості:
    fillStyle = 'rgba (0-255, 0-255, 0-255, 0.1-0.9)';

    Як заливки за замовчуванням стоїть чорний колір.


    Перша програма:

    <!DOCTYPE html>
    <html>
    <body>
    <canvas id="canvas" > </canvas>
    <script>
    var canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    canvas.width="300";
    canvas.height="300"; Розміри за замовчуванням: 300 px × 150 px
    ctx.fillStyle = 'rgb(200, 0, 0)'; (width × height), але можна
    ctx.fillRect(10, 10, 50, 50); встановлювати довільні розміри.
    ctx.fillStyle = 'rgba(0, 0, 100, 0.5)';
    ctx.fillRect(30, 30, 50, 50);
    </script>
    </body>
    </html>

    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
    Малювання шляхів в canvas

    Шлях являє собою набір точок, з'єднаних прямими лініями або


    кривими.

    Лінії можуть бути різної ширини, кривизни і кольору


    Розглянемо етапи побудови шляхів і функції малювання шляхів в
    javascript canvas:

    1. Створення шляху.
    Коли шлях створений інші команди вже працюють над створеним шляхом:
    ctx.beginPath ();
    2. Вибір методу побудови шляху (крива, пряма, крива Безьє) або перехід в
    нову точку:

    перехід в нову точку з вказаними координатами: ctx.moveTo (x, y);

    з'єднання прямою лінією останньої використаної координатою з


    точкою x, y: ctx.lineTo (x, y);

    Товщина лінії ctx.lineWidth = товщина у px

    Колір лінії ctx.strokeStyle = ‘колір'

    додавання дуги з центром в точці x і y і радіусом r з позиції


    startAngle до endAngle (за замовчуванням рух дуги за годинниковою
    стрілкою) ctx.arc (x, y, radius, startAngle, endAngle [,
    anticlockwise]);

    додавання еліпса до шляху з центром в точці x і y і радіусом radiusX і radiusY з


    початком в startAngle і закінченням у endAngle:
    ctx.ellipse (x, y, radiusX, radiusY, startAngle, endAngle, anticlockwise);
    3. Кінець шляху - з'єднанням прямою лінією передостанній
    точки з початковою точкою шляху ctx.closePath ();

    4. Малювання шляху: ctx.stroke (path);

    5. Зафарбування внутрішньої області шляху: ctx.fill ();


    Програма «Трикутник»

    <!DOCTYPE html>
    <html>
    <body>
    <canvas id="canvas" > </canvas>
    <script>
    var canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    canvas.width="300";
    canvas.height="300";
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 5;
    ctx.beginPath();
    ctx.moveTo(150, 150);
    ctx.lineTo(250, 150);
    ctx.lineTo(200, 200);
    ctx.closePath();
    ctx.stroke();
    ctx.fillStyle = 'rgb(255, 0, 0)';
    ctx.fill();
    </script>
    </body>
    </html>
    Програма Смайлик

    <!DOCTYPE html>
    <html>
    <body> false (за годинниковою стрілкою)
    <canvas id="canvas" > </canvas> True (проти годиннкової стрілки)
    <script>
    var canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    canvas.width="300";
    canvas.height="300";
    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // Коло
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false); // Посмішка
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true); // Ліве око
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true); // Праве око
    ctx.stroke();
    </script>
    </body>
    </html>
    Програма «Смайлик-розфарбований»
    ctx.font = "48px serif";
    ctx.fillText("Hello!!!", 10, 180);
    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // Коло
    ctx.fillStyle = 'rgb(255, 255, 0)';
    ctx.fill();
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false); // рот (за часовою стрілкою)
    ctx.fillStyle = 'rgb(255, 0, 0)';
    ctx.fill();
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true); // Ліве око
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true); // Праве око
    ctx.fillStyle = 'rgb(0, 0, 255)';
    ctx.fill();
    ctx.stroke();
    Творчий проект.

    Створіть математичний сайт, що демонструє різні види перерізу


    для різних фігур.
    1. Записати назву сайту, визначення перерізу та опитати
    користувача, який переріз він хоче побачити (використовувати
    вказівку Вибору/Перемикання.
    2. В залежності від вибору користувача відобразити картинку
    перерізу створену на основі Canvas
    3. Організувати перехід на першу сторінку.
    4. Відображення одного перерізу – 16.1, 2-х – 18.1, 3-х –20.
    Використати:
    5. Кольори ліній (у кожному перерізі)
    6. Товщини ліній (у кожному перерізі)
    7. Кольори зафарбування (у кожному перерізі)
    8. Підпис вершин літерами (у кожному перерізі)
    9. Перерізи для стандартних фігур та складних
    10. Перерізи до фігур на основі кіл або єліпсів.
    11. Творчий рівень – використання у проекті не розглянутих
    операторів (градієнтні заливки, стиль пунктиром – тощо). На
    сторінці із застосуванням творчого рівня – вказати назву
    оператора та яку дію виконував.
    Перерізи у кожного власні! Якщо будуть однакові перерізи та
    подібний програмний код, не зараховуватиму у всіх роботах. Де-
    кілька прикладів, щоб було зрозуміло.

    You might also like