- •Робота з Canvas
- •2. Додав полотно Canvas до html документу.
- •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.
Лабораторна робота № 7
Робота з Canvas
Виконав ст. гр. ПНК-21: Книшук Володимир
Мета лабораторної роботи: вивчити основи Canvas API, які включають в себе малювання фігури, контури, текст, колір і градієнти. Навчитися створювати складні малюнки, зображення, тіні, використовувати перетворення і анімовані малюнки. Змінювати лінії, форми і колір малюнку в JavaScript.
Завдання до лабораторної роботи:
Ознайомитися з основами JavaScript.
Додати полотно Canvas на сторінку.
Намалювати прямокутники використовуючи Canvas API.
Намалювати лінії та кола використовуючи Canvas API.
Створити малюнок за допомогою кривих quadraticCurveTo і bezierCurveTo на полонті Canvas.
Додати текст використовуючи Canvas API.
Додати градієнт на полотно використовуючи Canvas API.
Додати зображеня на полотно Canvas.
Використати перетворення на полотні Canvas .
Створити цикл малюнка використовуючи Canvas API.
Побудувати графіки використовуючи Canvas API.
Хід роботи:
Ознайомився з основами 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>