Canvas (HTML)
Canvas –HTML5ელემენტი, რომელიც განკუთვნილია რასტრული ორგანზომილებიანი სურათების
შესაქმნელად Javascript - ის მეშვეობით.
გამოიყენება როგორც წესი, გრაფიკული ელემენტებისათვის და ბროუზერის თამაშებისათვის.
ასევე შესაძლებელია მისი გამოყენება ვებ-გვერზე ვიდეოს ჩასასმელად და პლეერის შესაქმნელად.
ისტორია
პირველად Canvas ელემენტი იყო წარმოდგენილი კომპანია Apple -ის მიერ Webkit ძრავში Mac OS
X - თვის. მისი გამოყენება გათვლილი იყო Dashboard და Safari აპლიკაციებში.
დღესდღეობით Canvas ყველაზე ხშირად გამოიყენება გრაფიკების ასაგებად, მარტივი
ანიმაციებისათვისადა ბროუზერის თამაშებისათვის. ჯგუფიWHATWG გვთავაზობს გამოვიყენოთ
Canvas როგორც სტანდარტი გრაფიკის შესაქმნელად ახალი თაობის ვებ-აპლიკაციებში.
ორგანიზაციაMozilla Foundation - ს მიჰყავს პროექტი Canvas 3D, რისი მიზანიც არის
დაბალდონიანი გრაფიკული დამაჩქარებლების მხარდაჭერა სამგანზომილებიანი
გამოსახულებების გამოსატანად,Canvas - ის მეშვეობით.
შესაძლებლობები
Canvas - ის მეშვეობით შეგვიძლია გამოვიტანოთ სურათი, ვიდეო და ტექსტი. ამათი ფერადი
ფერით შეღებვა, კონტურის შემოყოლება და ასევე გრადიენტის გავლება.
ატრიბუტები
ამელემენტს, გარდა უნივერსალური ატრიბუტებისა, გააჩნია მხოლოდ 2 ატრიბუტი:
height - canvas ელემენტის სიმაღლე (სტანდარტულად 300 პიქსელი)
width – canvas ელემენტის სიგანე (სტანდარტულად 150 პიქსელი)
მხარდაჭერა
ასევე კომპანია Google - ის მიერ იყო შექმნილი JavaScript ბიბლიოთეკა- ExplorerCanvas,რომელიც
მხარს უჭერდა IE ძველ ვერსიებს (IE7 და IE8).
API
IE Firefox Safari Chrome Opera iPhone Android
9.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+
2.
არსებობს ორი ფუნქციაგამოსახულებებთანსამუშაოდ:
getImageData( x, y, width, height ) - იღებს Canvas- ისშიგთავს იმ პირობით, რომ მთელი
ინფორმაცია იმავე საიტიდანაა.
putImageData( x, y, width, height ) -გამოაქვსgetImageData - ს მიერ დაბრუნებული შედეგი.
კვადრატის გასასუფთავებლად (თეთრი ფერით შევსება) გამოიყენება ფუნქცია - clearRect( x, y, width,
height ).
მართკუთხედის სახატავად გამოიყენება ფუნქციები:
strokeRect( x, y, width, height ) - კონტურის შემოვლება
fillRect( x, y, width, height ) - ფიგურის ჩასხმა
რკალის სახატავად გამოიყენება ფუნქცია - arc( x, y, radius, startAngle, endAngle, anticlockwise ).
რთული ფიგურების დასახაზადა და უბრალოდ ხაზებისთვის გამოიყენება შემდეგი კომბინაცია:
1. beginPath()
2. moveTo( x, y ) - აჩოჩებს კურსორს მითითებულ პოზიციაზე.
3. lineTo( x, y ) - სვამს საკონტროლო წერტილებს საწყისსა და საბოლოო პოზიციებში.
თუ გვინდა რომ დავხატოთ სხვა ფიგურა მაშინ უნდა გამოვიძახოთ პროცედურა - closePath() და
მივყვეთ ისევ პირველივე ეტაპიდან. ფიგურის საკონტროლო წერტილებიდან გარსის
შემოსავლებად და შეღებისთვის უბრალოდ უნდა გამოვიძახოთ stroke() და fill() შესაბამისად.
კლაკნილების სახატავად გამოიყენება ორი ფუნქცია:
quadraticCurveTo( Px, Py, x, y )
bezierCurveTo( P1x, P1y, P2x, P2y, x, y )
იმისათვის რომ შევცვალოთ საღებავის ფერი, საკმარისია შევცვალოთ fillStyle - ის პარამეტრი.
ანალოგიურად შეგვიძლია შევუცვალოთ ფერი კონტურის ხაზებს strokeStyle - ის გამოყენებით.
თავისებურებები
თუ ჩვენ ქანვას ელემენტს შევუცვლით სიმაღლეს ან სიგანეს წაიშლება მისი შიგთავსი და
ყველა პარამეტრი რადგან ის ხელახლა იქმნება მაგ შემთხვევაში.
საწყისი ათვლის წერტილი (0, 0) მოთავსებულია ზედა მარცხენა კუთხეში. მაგრამ
შესაძლებელია მისი გაჩოჩება.
3D კონტექსტი არ არსებობს. არსებობს ცალკეული ტექნოლოგიები, მაგრამ ისინი არ არის
სტანდარტიზირებული
ტექსტის ფერი შესაძლებელია მივუთითოთ css - ის ანალოგიურად ასევე მისი ზომაც.
მაგალითები ან ოპტიმიზაციის პატერნები
თუ არ არის აუცილებლობა, იმისა რომ გაანახლოთ ელემენტი მაგრამ გინდათ მოახდინოთ
მანიპულაცია მასთან, თქვენ შეგიძლიათ “დააფიქსიროთ” ელემენტი და შეინახოთ ცვლადში.
შემდეგ კი იმუშაოთ უკვე ამ სურათთან, რომ არ აიძულოთ Canvas ყოველი მანიპულირების დროს
გადაიხატოს.
3.
იმ შემთხვებაში თუმთელი გამოსახულება არ უნდა განახლდეს და მხოლოდ გვინდა რაიმე
მონაკვეთზე მოვახდინოთ ცვლილება, უნდა გასუფთავოთ ის კონკრეტული ნაწილი ელემენტზე
და დავხატოთ ის ხელახლა.
გამოყენება
ელემენტის გამოყენება და მისით მანიპულირება შესაძლებელია მხოლოდ JavaScript - ით.
<!doctype html>
<html>
<head>
<title>Canvas</title>
<scriptsrc="example.js"></script>
</head>
<body>
<canvasid="canvas"></canvas>
</body>
</html>
// example.js ფაილი
function onLoadHandler(){
"use strict"
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
// შემდეგ რაიმე ბრძანებები
}
window.onload= onLoadHandler;
