Məqalə oxucunun sadə HTML və Javascript biliklərinə malik olduğunu nəzərdə tutur.
Başlamazdan qabaq, tərkibində <canvas> elementi olan səhifə yaradaq.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css" rel="stylesheet">
canvas { border: solid 1px #000; }
</style>
<script type="text/javascript" src="draw.js"></script>
</head>
<body>
<canvas id="myCanvas" width="500" height="250">
Sizin brauzer canvas elementini dəstəkləmir
</canvas>
</body>
</html>
2D context API
Canvas elementinin 2D context API-da implementasiya olunmuş bəzi funksionallıqları nəzərdən keçirək:
Canvas state (canvasın vəziyyəti)
Hər bir context təsvir vəziyyətlərindən ibarət stekə malikdir. Bu stekdən istifadə etmək üçün aşağıdakı funksiyalardan istifadə edə bilərsiniz.
save() – contextin cari vəziyyətini stekə əlavə edir.
restore() – stekə ən son əlavə olunmuş vəziyyəti bərpa edir. Əgər stek boşdursa, heç nə etmir.
Rənglər
fillStyle – xassəsi fiqurların hansı rənglə rənglənməsini təyin etmək üçündür.
strokeStyle – xassəsindən xətlərin rəngini təyin etmək üçün istifadə olunur.
Xətt stilləri
lineWidth – təsvir çəkilən zaman xəttin qalınlığını təyin etmək üçün istifadə olunur.
lineCap – ilə xətt sonluğunun forması təyin edilir. butt, round və square qiymətlərindən birini alır.
lineJoin – ilə xəttin birləşmə stilini təyin etmək olar. bevel, round və miter qiymətlərindən birini alır.
Sadə təsvirlər
Canvas üzərində düzbucaqlı dördbucaq (rectangle) çəkmək üçün 3 funksiya vardır. Bunlar aşağıdakı şəkildə təyin olunurlar:
1. clearRect(x, y, w, h) – funksiyası düzbucaqlının daxilinə düşən pixelləri tam şəffaf qara rəng ilə əvəz edir.
2. fillRect(x, y, w, h) – funksiyası fillStyle stilindən istifadə edərək düzbucaqlı sahə çəkir. Bu yolla dördbucaqlını rəngləmək olar.
3. strokeRect(x, y, w, h) – funcksiyası strokeStyle, lineWidth, lineJoin və miterLimit xassələrindən istifadə edərək düzbucaqlı fiquru çəkir. Dördbucaqlının çərçivəsini çəkir.
Hər 3 funksiya arqument olaraq 4 qiymət qəbul edir. Bunlardan ilk 2-si x və y – düzbucaqlının sol yuxarı koordinatlarını, digər 2-si h və w isə düzbucaqlının eni və uzunluğunu təyin edir.
Bir neçə nümuməni nəzərdən keçirək. Bunun üçün yuxarıdakı səhifəyə əlavə etdiyimiz draw.js faylından istifadə edə bilərik:
window.addEventListener('load', function () {
var c = document.getElementById( "myCanvas" );
// əgər brauzer canvas elementini dəstəkləyirsə
if ( c && c.getContext ) {
// hər bir canvas elementi üçün bir dəfə inisializasiya edə bilərsiniz
var cxt = c.getContext( "2d" );
cxt.fillStyle = "#f00";
cxt.strokeStyle = "#00f";
cxt.lineWidth = 3;
cxt.fillRect( 20, 20, c.width/2, c.height/2 );
cxt.strokeRect( 20, 20, c.width/2, c.height/2);
cxt.clearRect( 75, 50, 30, 30 );
}
// canvas elementi dəstəklənmirsə
else {
window.alert( "Sizin brauzer canvas elementini dəstəkləmir." );
}
}, false);
Nəticə aşağıdakı kimi olmalıdır:
Xətt stillərini yoxlamaq üçün aşağıdakı nümunəyə baxaq:
var lineCaps = [ 'butt','round','square' ];
cxt.strokeStyle = '#0A0';
// xətlərin çəkilməsi
for ( var i=0; i < lineCaps.length; i++ ){
cxt.lineWidth = 10;
cxt.lineCap = lineCaps[i];
cxt.beginPath();
cxt.moveTo( 25, 30 + i*20 );
cxt.lineTo( 175, 30 + i*20 );
cxt.stroke();
}
Nəticə aşağıdakı kimidir:
Mürəkkəb təsvirlər
Yollar (path)
Context obyekti həmişə bir cari yola malikdir. Yol sıfır və daha artıq altyollara malik olur. Canvas altyolları sizə müxtəlif mürəkkəblikdə fiqurlar çəkməyə imkan verir. Aşağıdakı metodları nəzərdən keçirək:
beginPath() – cari yolu sıfırlayır.
moveTo(x, y) – verilmiş nöqtə ilə altyol yaradır
closePath() – sonuncu altyolu bağlı olaraq işarələyir. Başlanğıcı – son altyolun başlanğıc nöqtəsi olan yeni altyol yaradır və onu yola əlavə edir.
lineTo(x, y) – altyolda ən son nöqtədən (x,y) nöqtəsinə düz xətt çəkir və daha sonra (x,y) nöqtəsini altyola əlavə edir. Başlanğıc nöqtəni göstərən altyol mövcud olmalıdır.
quadraticCurveTo(cpx, cpy, x, y) – altyolda ən son nöqtəni (x,y) nöqtəsinə cpx və cpy idarə nöqtələri ilə kvadratik Bezye əyrisi vasitəsilə birləşdirir. Daha sonra (x,y) nöqtəsini altyola əlavə edir. Bezye əyriləri haqda buradan oxuya bilərsiniz.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) – altyolda ən son nöqtəni (x,y) nöqtəsinə cp1x, cp1y, cp2x, cp2y idarə nöqtələri ilə kubik Bezye əyrisi vasitəsilə birləşdirir. Daha sonra (x,y) nöqtəsini altyola əlavə edir. Bezye əyriləri haqda buradan oxuya bilərsiniz.
arc(x, y, radius, startAngle, endAngle [, anticlockwise ] ) – qövs çəkmək üçün istifadə olunur. Parametrlər aşağıdakı kimi təyin olunur:
x,y – qövsün mərkəzinin koordinatı
radius – qövsün radiusu
startAngle, endAngle – başlanğıc və son bucaq, radian ilə
anticlockwise – çəkmə istiqaməti
rect(x, y, w, h) – metodu ilk növbədə yola (x, y), (x+w, y), (x+w, y+h), (x, y+h) nöqtələrindən ibarət yeni altyol əlavə edir. Daha sonra bu nöqtələri düz xəttlə birləşdirir və alt yolu bağlı olaraq işarələyir. Daha sonra isə (x,y) nöqtəsindən ibarət yeni altyol yaradaraq əsas yola əlavə edir.
fill() – metodu cari yolun daxilindəki bütün altyolları fillStyle-a əsasən rəngləyir və həmin altyolları bağlı olaraq elan edir.
stroke() – metodu cari yolun daxilindəki bütün altyolları çəkilmə qaydalarını lineWidth, lineCap, lineJoin və miterLimit xassələrinə əsasən hesablayır və strokeStyle xassəsinə uyğun olaraq çəkir.
isPointInPath(x, y) – metodu verilmiş (x,y) nöqtəsinin cari yolun daxilinə düşüb-düşmədiyini təyin etmək üçündür.
Yuxarıdakı metodlardan bir neçəsini nümunə yoxlayaq:
window.addEventListener('load', function () {
var c = document.getElementById( "myCanvas" );
// əgər brauzer canvas elementini dəstəkləyirsə
if ( c && c.getContext ) {
// hər bir canvas elementi üçün bir dəfə inisializasiya edə bilərsiniz
var cxt = c.getContext( "2d" );
cxt.fillStyle = ' #00f';
cxt.strokeStyle = '#f00';
cxt.lineWidth = 2;
// düz xətt
cxt.beginPath();
cxt.moveTo(10, 10);
cxt.lineTo(100, 100);
cxt.moveTo(150, 100);
// Bezye əyrisi
cxt.bezierCurveTo(180, 30, 250, 180, 300, 100);
cxt.stroke();
cxt.closePath(); // Draw a circle using the arc function.
// çevrə
cxt.beginPath();
cxt.arc(125, 115, 30, 0, 360, false);
cxt.stroke();
cxt.closePath();
}
// canvas elementi dəstəklənmirsə
else {
window.alert( "Sizin brauzer canvas elementini dəstəkləmir." );
}
}, false);
Nəticə aşağıdakı kimi olacaq:
Kölgələr
Canvas elementinə kölgə vermək üçün canvas contextinin shadowColor və shadowBlur xassələrindən istifadə edə bilərsiniz. Aşağıdakı nümunəni nəzərdən keçirək:
var canvas=document.getElementById("myCanvas");
var cxt =canvas.getContext("2d");
cxt.rect(20,20,200,100);
cxt.fillStyle="#8ED61F";
cxt.shadowColor="black";
cxt.shadowBlur = 10;
cxt.fill();
</script>
Nəticə:
Text
Aşağıdakı metod və xassələri nəzərdən keçirək:
font – bu xassə vasitəsilə contextin cari şriftini yoxlaya və ya dəyişə bilərsiniz. Sintaksis CSS font atributunun xassəsi kimidir.
textAlign – xassəsi vasitəsilə mətnin horizontal yerləşməsini yoxlamaq və dəyişmək olar. Qəbul olunan qiymətlər start, end, left, right və center qiymətləridir. Susmaya görə start qiyməti götürülür.
textBaseline – xassəsi vasitəsilə mətnin vertikal yerləşməsini yoxlamaq və dəyişmək olar. Aşağıda göstərilən qiymətlərdən birini alır: top, hanging, middle, alphabetic, ideographic və bottom.
measureText(text) – metodu vasitəsilə mətnin uzunluğunu yoxlaya bilərsiniz. Metod cavab olaraq TextMetrics tipli obyekti qaytarır.
fillText(text, x, y [, maxWidth ] ) – mətni rəngli şəkildə çəkilməsi üçündür. fillStyle xassəsinin qiymətinə əsasən mətni çəkir.
strokeText(text, x, y [, maxWidth ] ) – mətni xətti şəkildə çəkilməsi üçün istifadə olunur. strokeStyle xassəsinin qiymətinə əsasən mətni çəkir.
var metrics = context.measureText(text);
var width = metrics.width;
Yuxarıda qeyd etdiyimiz funksionallıqları aşağıdakı nümunədə yoxlayaq:
// hər bir canvas elementi üçün bir dəfə inisializasiya edə bilərsiniz
var cxt = c.getContext( "2d" );
var x = c.width / 2;
var y = c.height / 2 - 10;
var text = "HTML5 Canvas";
// şrift
cxt.font = "italic 30pt Calibri";
// horizontal yerləşmə
cxt.textAlign = "center";
// vertikal yerləşmə
cxt.textBaseline = "middle";
// rəng
cxt.fillStyle = "blue";
// mətni çək
cxt.fillText( text, x, y );
// mətnin uzunluğunu götür
var metrics = cxt.measureText( text );
var width = metrics.width;
cxt.strokeStyle = "#003300";
cxt.font = 'italic 30px Calibri';
cxt.strokeText("uzunluq: " + width + "px", x, y + 40);
Nəticə aşağıdakı kimi olacaq:
Şəkillər
Canvas üzərinə şəkil əlavə etmək üçün drawImage metodu istifadə oluna bilər. Bu metod 3 müxtəlif arqument siyahısı üzrə çağırıla bilər:
drawImage(image, dx, dy) – Burada dx və dy koordinatları şəklin canvas üzərində yerləşəcək sol yuxarı koordinatlarıdır.
drawImage(image, dx, dy, dw, dh) – Şəklin ölçüsünü təyin etmək üçün istifadə olunur. dw və dh arqumentləri uyğun olaraq şəklin uzunluğunu və enini göstərir.
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) – şəklin müəyyən hissəsini kəsmək (crop) üçün istifadə olunur. Yuxarıdakı parametlər şəkildən kəsmək istədiyimiz düzbucaqlı sahənin yerini (yuxarı sol koordinatlarını) və ölçülərini təyin edir.
Göstərilən hər 3 metod image arqumenti olaraq HTMLImageElement, HTMLCanvasElement, və ya HTMLVideoElement obyektlərindən birini qəbul edə bilər.
Aşağıdakı nümunəni nəzərdən keçirək:
window.addEventListener('load', function () {
var c = document.getElementById( "myCanvas" );
// əgər brauzer canvas elementini dəstəkləyirsə
if ( c && c.getContext ) {
// hər bir canvas elementi üçün bir dəfə inisializasiya edə bilərsiniz
var cxt = c.getContext( "2d" );
var image = new Image();
image.src = "chrome.png";
// şəklin yerləşməsi və ölçüsü
var destX = 10;
var destY = 10;
var imageWidth = 100;
var imageHeight = 100;
var cropX = 20;
var cropY = 20;
var cropWidth = 50;
var cropHeight = 50;
image.addEventListener('load', function(){
// şəklin canvas üzərində çəkilməsi : drawImage(image, dx, dy)
cxt.drawImage( image, destX, destY );
// şəklin ölçüsünün təyin olunması : drawImage(image, dx, dy, dw, dh)
cxt.drawImage( image, destX + 110, destY, imageWidth * 2, imageHeight * 2 );
// şəklin kəsilməsi : drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
cxt.drawImage( image, cropX, cropY, cropWidth, cropHeight, destX + 320 , destY, cropWidth, cropHeight );
});
}
// canvas elementi dəstəklənmirsə
else {
window.alert( "Sizin brauzer canvas elementini dəstəkləmir." );
}
}, false);
Nəticə aşağıdakı kimidir:
Canvas üzərində mousun koordinatının tapılması
Canvas üzərində mousun koordinatını aşağıdakı script vasitəsi ilə asanlıqla tapmaq olar:
NeatsUtils = {}
/**
* Mouse-un cari mövqeyinin tapılması
*
* @param event : event obyekti
* @returns cursor obyekti
*/
NeatsUtils.getPosition = function(event) {
event = event || window.event;
var cursor = { x:0, y:0 };
if ( event.pageX == null && event.clientX != null ) {
var doc = document.documentElement, body = document.body;
event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
}
cursor.x = event.pageX - event.target.offsetLeft;
cursor.y = event.pageY - event.target.offsetTop;
return cursor;
}
window.addEventListener('load', function () {
var c = document.getElementById( "myCanvas" );
// əgər brauzer canvas elementini dəstəkləyirsə
if ( c && c.getContext ) {
// hər bir canvas elementi üçün bir dəfə inisializasiya edə bilərsiniz
var cxt = c.getContext( "2d" );
var x = c.width / 2;
var y = c.height / 2 - 10;
// şriftin xassələrini təyin et
cxt.font = "italic 30pt Calibri";
cxt.textAlign = "center";
cxt.textBaseline = "middle";
cxt.fillStyle = "blue";
// koordinatları çap et
cxt.fillText( "move mouse over me", x, y );
c.addEventListener( 'mousemove', function(e) {
// mousun mövqeyini təyin et
var mouse = NeatsUtils.getPosition(e);
var text = mouse.x + " " + mouse.y;
// canvası təmizlə
cxt.clearRect(0, 0, c.width, c.height );
// koordinatları çap et
cxt.fillText( text, x, y );
cxt.closePath();
});
}
// canvas elementi dəstəklənmirsə
else {
window.alert( "Sizin brauzer canvas elementini dəstəkləmir." );
}
}, false);
Nəticəni aşağıdakı kimidir
Canvas elementi haqda daha ətraflı məlumat almaq üçün Canvas elementinin spesifikasiyasından istifadə edə bilərsiniz.
Əlavə resurslar:
1. WHATWG Canvas Documentation
Nümunələr:
1. Sketchpad
