Canvas Üzerinde Metin ve Görseller

Yazı tipini ayarlayın: ctx.font = "bold 24px sans-serif". Çizin: ctx.fillText("Hello", x, y) veya ctx.strokeText("Hello", x, y). Y koordinatı metin taban çizgisidir — metni bir sınırlayıcı kutu içinde doğru konumlandırmak için üst uzantı yüksekliğini bunun üzerine ekleyin.

ctx.textAlign yatay hizalamayı denetler: "left" (varsayılan), "center", "right". ctx.textBaseline, y koordinatına göre dikey hizalamayı denetler: "top", "middle", "alphabetic" (varsayılan), "bottom". Ortalanmış metin için ikisini de "center" ve "middle" olarak ayarlayın.

ctx.measureText("text"), genişlik ve yazı tipi ölçümlerini içeren bir TextMetrics nesnesi döndürür. Metin konumlarını dinamik olarak hesaplamak için kullanın — metni bir kutuda ortalamak, metni bir maxWidth değerinde satırlara bölmek veya etiketleri veri noktalarının yanında sağa hizalamak için.

Tuvalde yerleşik metin satır kaydırma özelliği yoktur. Bunu kendiniz uygulayın: sözcük genişliklerini ölçün, maxWidth değerini aşana kadar biriktirin, ardından lineHeight aralıklarında yeni bir satıra geçin. Bu, tuval oluşturma kütüphanelerinde yaygın bir yardımcı işlevdir.

ctx.drawImage(image, dx, dy), bir HTMLImageElement, HTMLCanvasElement veya HTMLVideoElement'i (dx, dy) konumuna çizer. Piksellerin çizimden önce hazır olduğundan emin olmak için önce görüntüyü yükleyin ve onload işleyicisinde çizin.

ctx.drawImage(image, dx, dy, dw, dh), görüntüyü dw x dh boyutlarına ölçekler. En-boy oranı otomatik olarak korunmaz — boyutları elle hesaplayın. En-boy oranını korumak için: dw = img.width * scale; dh = img.height * scale.

Dokuz bağımsız değişkenli drawImage: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh). Kaynak dikdörtgeni (sx, sy, sw, sh), görüntüden kırpma yapar; hedef dikdörtgeni (dx, dy, dw, dh), kırpılan bölümü tuval üzerine yerleştirir ve ölçekler.

ctx.imageSmoothingEnabled = false, görüntüler ölçeklenirken iki doğrusal enterpolasyonu devre dışı bırakır. Keskin ve yumuşatılmamış ölçekleme istendiğinde piksel sanatı için kullanın. Yumuşak ölçeklemenin daha iyi göründüğü fotoğrafik görüntülerde etkin bırakın (varsayılan).

Bir tuvali drawImage için kaynak olarak kullanarak bir tuvali diğerinin üzerine çizin. Bu, ekran dışı oluşturmayı mümkün kılar: karmaşık birleşimleri gizli bir tuvalde çizin, ardından her karede bu tuvali tek bir işlemle görünür tuvalin üzerine çizin.

ctx.globalAlpha (0 ile 1 arasında), kendisinden sonra yapılan tüm çizimlere tekdüze saydamlık uygular. ctx.globalCompositeOperation, yeni çizimlerin mevcut piksellerle nasıl birleştirileceğini denetler: "source-over" (varsayılan), "multiply", "screen", "destination-out" (silme) ve daha fazlası.

canvas.toDataURL("image/png"), tuvali base64 PNG veri URL'si olarak dışa aktarır. Kullanıcının başlattığı indirme işlemi için kullanın: bir bağlantı öğesi oluşturun, href'i veri URL'sine ve download özniteliğini bir dosya adına ayarlayın, ardından öğeye program aracılığıyla tıklayın.

Tuval metni oluşturma; konumlandırma için ctx.font, fillText/strokeText, textAlign ve textBaseline değerlerini, düzen hesaplamaları için ise measureText yöntemini kullanır. drawImage ile görüntü çizimi ölçeklemeyi ve kırpmayı destekler; globalAlpha ve globalCompositeOperation birleştirmeyi denetler. toDataURL, tuvali indirme veya başka amaçlarla kullanmak üzere dışa aktarır.