HTML5 Canvas öğesi, içeriğinin JavaScript ile işlenmesi dışında, <div>, <a> veya <table> etiketine benzer bir HTML etiketidir. HTML5 Canvas’tan yararlanmak için, canvas(tuval) etiketini HTML belgesinin herhangi bir yerine yerleştirmemiz, canvas etiketine JavaScript ile erişmemiz, bir içerik oluşturmamız ve ardından görselleştirmeler için HTML5 Canvas API’sini kullanmamız gerekir.
Tuval kullanırken, canvas öğesi ile canvas bağlamı arasındaki farkı anlamak, çoğu zaman insanların kafasını karıştırdığı zaman önemlidir. Canvas öğesi, HTML sayfasına gömülü olan gerçek DOM düğümüdür. Tuval bağlamı, tuval öğesinin içinde grafikler oluşturmak için kullanabileceğiniz özellik ve yöntemlere sahip bir nesnedir. Bağlam 2d veya webgl (3d) olabilir.
Her canvas öğesi yalnızca bir içeriğe sahip olabilir. GetContext() yöntemini birden çok kez kullanırsak, aynı bağlam nesnesine bir başvuru döndürür.
Çıktı:
Kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> </head> <body> <canvas id="canvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // birşeyler yazın context.font = '40pt Calibri'; context.fillStyle = 'blue'; context.fillText('Merhaba Dünya!', 150, 100); </script> </body> </html> |
Yorum Yap