ისწავლე

სურათების გამოყენება

წინა სტატიებში შევისწავლეთ თუ როგორ უნდა დავხატოთ ფიგურები და ტექსტები კანვასში. ამ სტატიაში კი განვიხილავთ თუ როგორ გამოვიყენოთ კანვასში სურათები. სურათები შეიძლება გამოვიყენოთ: დინამიური პოზიცირებისთვის, უკანა ფონისთვის და სხვა დანიშნულებისთვის.

სურათის ტიპს, რომელსაც გამოვიყენებთ, აუცილებლად უნდა ჰქონდეს მისი მხარდაჭერა ბრაუზერში, რათა ის კანვასში ჩავტვირთოთ. მსგავსი ტიპის ფორმატებია: PNG, GIF, JPG და JPEG.

კანვასში სურათების გამოყენებისთვის ორი პროცესია შესასრულებელი:

  • რომელიმე ელემენტიდან უნდა ამოვიღოთ სურათის ობიექტი (img თეგიდან, სხვა კანვასიდან ან ვიდეოდან). ასევე შესაძლებელია უბრალოდ სურათის მისამართის მიწოდებაც.
  • დავხატოთ სურათი drawImage მეთოდის გამოყენებით.

სურათის მიღება დასახატად

კანვასის API-ის გამოყენებისთვის შესაძლებელია შემდგომი ტიპები გამოვიყენოთ, როგორც სურათის წყარო:

  • HTMLImageElement სურათები რომლებიც შექმნილია Image კონსტრუქტორით, ან <img> ელემენტი.
  • SVGImageElement SVG სურათები, რომლებიც ჩაშენებულია <image> ელემენტით.
  • HTMLVideoElement <video> ელემენტიდან შეგვიძლია ამოვჭრათ ამჟამინდელი კადრი (frame), რომელიც შეგვიძლია სურათად გამოვიყენოთ.
  • HTMLCanvasElement, როგორც სხვა <canvas> ელემენტი, შეგვიძლია გამოვიყენოთ, როგორც სურათის წყაროდ.
  • VideoFrame ერთი ნებისმიერი კადრი (frame) ვიდეოდან, რომელიც შეგვიძლია სურათად გამოვიყენოთ.

სურათების ამოღება

წინა სტატიებში განვიხილეთ თუ როგორ შეიძლება ელემენტების ამოღება DOM-ის გამოყენებით. სტატიაში განხილული მეთოდების გარდა კიდევ შეგვიძლია ერთი თვისება გამოვიყენოთ - document.images, რომელიც დააბრუნებს სურათების მასივს.

სურათის შექმნა

სურათის შესაქმნელად შეგვიძლია Image კონსტრუქტორი გამოვიყენოთ.

JS
const img = new Image();
img.src = 'https://iswavle.com/assets/images/js.png';
JS
const img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAADFSURBVDhP7ZMtDoQwEIVfVxAUgiB6B2pQaJAcAc29egASbCUHgBOAwmCqikGR/WkmId2wS7JrVuxnpnnTvMxPhl3v4AsuFD/mxw3WdcU8z/Y9TZONz5wOMc9zBEEAYwzatiV157SFMAyRpim2bSPF5dSAc46+71GWJSkubw2UUhiGAU3TYBxHUl1eGnRdh6Io4HkeqqoCY4wyLocGUkrbsxACy7KgrmtkWUZZl8MtPEqPoghaa8RxbFeZJAl836cfO/9bAG4DokeTflf1sgAAAABJRU5ErkJggg==';

სურათის დახატვა

როცა სურათის ობიექტი გვექნება ამოღებული, მის შემდგომ სურათის დახტვა შესაძლებელია drawImage მეთოდით.

drawImage(image, x, y) მეთოდი პარამეტრად ღებულობს 3 მნიშვნელობას:

  • image - სურათის ობიექტს
  • x - X კოორდინატი თუ საიდან დაიწყოს სურათი
  • y - Y კოორდინატი თუ საიდან დაიწყოს სურათი

დიაგრამის მაგალითი

მოდით, დავხატოთ დიაგრამა სხვადასხვა ხაზებით და უკანა ფონზე გამოვიყენოთ სურათი.

HTML
<canvas id="graphExample" width="180" height="150"></canvas>
JS
const graphExampleCanvas = document.querySelector('#graphExample');

if (graphExampleCanvas.getContext) {
  const ctx = graphExampleCanvas.getContext('2d');
  const img = new Image();
  img.src = 'https://iswavle.com/assets/images/canvas-graph-bg.png';
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
}

drawImage მეთოდს ასევე შესაძლებელია გადავცეთ width და height, რის მიხედვითაც განისაზღვრება სურათის გაფართოება.

შეჯამება

ამ თავში განვიხილეთ თუ როგორ არის შესაძლებელი canvas-ის ელემენტში, სხვადასხვა ხერხით, დავამატოთ სურათი.