Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Zvit7.docx
Скачиваний:
34
Добавлен:
16.02.2016
Размер:
316.06 Кб
Скачать

Лабораторна робота № 7

Робота з Canvas

Виконав ст. гр. ПНК-21: Книшук Володимир

Мета лабораторної роботи: вивчити основи Canvas API, які включають в себе малювання фігури, контури, текст, колір і градієнти. Навчитися створювати складні малюнки, зображення, тіні, використовувати перетворення і анімовані малюнки. Змінювати лінії, форми і колір малюнку в JavaScript.

Завдання до лабораторної роботи:

  1. Ознайомитися з основами JavaScript.

  2. Додати полотно Canvas на сторінку.

  3. Намалювати прямокутники використовуючи Canvas API.

  4. Намалювати лінії та кола використовуючи Canvas API.

  5. Створити малюнок за допомогою кривих quadraticCurveTo і bezierCurveTo на полонті Canvas.

  6. Додати текст використовуючи Canvas API.

  7. Додати градієнт на полотно використовуючи Canvas API.

  8. Додати зображеня на полотно Canvas.

  9. Використати перетворення на полотні Canvas .

  10. Створити цикл малюнка використовуючи Canvas API.

  11. Побудувати графіки використовуючи Canvas API.

Хід роботи:

  1. Ознайомився з основами JavaScript.

<!DOCTYPE html>

<html>

<head>

<meta charset=UTF-8» >

<title>Lesson 5</title>

<script type=»text/javascript»>

function show_prompt() {

var name=prompt(«Будь ласка, введіть ваше ім’я», «Книшук Володимир»);

if (name!=null && name!=»») {

document.write («Привіт « + name + «. Як ви сьогодні?»);

}

}

</SCRIPT>

</head>

<body>

Subscribe to our newsletter

<form method=»post» action=»»>

<input type=»button» onclick=»show_prompt()» value=»Submit» />

</form>

</body>

</html>

2. Додав полотно Canvas до html документу.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Canvas Template</title>

<script type="text/javascript">

function setup() {

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

if (canvas.getContext) {

var ctx = canvas.getContext('2d');

}

}

</script>

</head>

<body onload="setup();">

<canvas id="lessonCanvas" width="300" height="300" style="margin:100px;"></canvas>

</body>

</html>

3. Намалював прямокутники використовуючи Canvas api.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Drawing Rectangles</title>

<script type="text/javascript">

function setup() {

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

if (canvas.getContext) {

var ctx = canvas.getContext('2d');

ctx.strokeRect(0, 0, 300, 300);

ctx.strokeStyle = 'rgb(255,0,0)';

ctx.strokeRect(0.5, 0.5, 100, 100);

ctx.fillRect(20, 20, 100, 100);

ctx.fillStyle = 'rgb(0,255,0)';

ctx.fillRect(50, 50, 100, 100);

ctx.clearRect(80, 80, 30, 30);

}

}

</script>

</head>

<body onload="setup();">

<canvas id="lessonCanvas" width="300" height="300" style="margin:100px;"></canvas>

</body>

</html>

4. Намалював лінії та кола використовуючи Canvas api.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Drawing Lines and Circles</title>

<script type="text/javascript">

function setup() {

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

if (canvas.getContext) {

var ctx = canvas.getContext('2d');

ctx.strokeRect(0, 0, 300, 300);

ctx.moveTo(20, 20);

ctx.lineTo(100, 100);

ctx.lineTo(80, 200);

ctx.lineTo(200, 80);

ctx.lineTo(200, 200);

ctx.lineTo(280, 280);

ctx.stroke();

ctx.fillStyle = 'rgb(255,0,0)';

ctx.beginPath(); //step 4

ctx.arc(100, 100, 16, 0, Math.PI * 2, false);

ctx.fill();

ctx.stroke(); //step 5

ctx.beginPath();

ctx.arc(170, 170, 16, 0, Math.PI, true);

ctx.fill();

}

}

</script>

</head>

<body onload="setup();">

<canvas id="lessonCanvas" width="300" height="300" style="margin:100px;"></canvas>

</body>

</html>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]