Tuval uygulamaları oluşturmak yeni bir şeydir, hatta onunla oyunlar oluşturabiliriz, hem masaüstü hem de mobil tüm büyük tarayıcılarda desteklenir ve bu, Flash'ı kullanmaktan daha uygun bir çözüm haline getirir.
Bu eğitimde, herhangi bir Flash gerektirmeyen basit bir renk seçici oluşturmak için tuval öğesini kullanacağız. İhtiyacınız olan tek şey bir metin editörü ve bir tarayıcıdır.
Başlamadan önce, neler yapacağımıza bir göz atın İşte. Kaynak dosyalarını da indirebilirsiniz. İşte. Demoyu yerel olarak test edecekseniz, Chrome dışında bir tarayıcı kullanmanız gerektiğini unutmayın. Chrome'un güvenlik modeli, komut dosyasının yalnızca çevrimiçi çalışacağı anlamına gelir.
Bu örnek için HTML çok az olacaktır, renk seçicinin çalışması için tek ihtiyacımız olan bir tuval elemanı ve seçilen rengin RGB ve HEX biçimlerinde gösterilmesi için bir yer, yani ihtiyacımız olan tek şey şudur:
HEX: RGB: Renk paletiyle bir arka plan görüntüsü kullanacağımız için, tuvalim o resmin genişliğini ve yüksekliğini ve seçili renk için değerleri daha kolay seçim için girişlerde görünecektir.
Bazı jQuery kodlarını kullanacağımızdan jQuery'yi sayfanıza eklemelisiniz.
Renk seçici çalışmasını yapmak için yapmamız gereken ilk şey tuvali ve içeriğini elde etmektir ve ihtiyacımız olan tek şey bir kod satırıdır:
var canvas = document.getElementById('canvas_picker').getContext('2d');Artık tuval elemanını ve içeriğini aldık, görüntüyü tuvalin arka planı olarak ayarlayarak başlayabiliriz. Bunu yapmak için bir görüntü nesnesi oluşturmalı ve kaynağını resmin URL'sini yapmalıyız. Bu resim yüklendiğinde, tuvali çizmemiz gerekiyor:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});Şimdiye kadar çok iyi değil mi?
Bu, tuvalde bir yere tıkladığınızda neler olduğunu tanımlamamız gereken kısımdır ve bunun hakkında düşünürseniz, tıklatılan yeri görmek için öncelikle kullanıcının imleç konumunu tuvalde tutmanız gerekir;
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;Bu iki kod satırı ile, kullanıcının nerede tıkladığını ve ne yaptığımızı görebildiğimiz yeri, kullanıcının tıkladığı yerlerden alıp tuvalin ofsetinden çıkardığını görebiliyoruz. Bu, kullanıcının tuvalin konumuna göre nerede tıkladığını söyleyecektir.
Bir sonraki adımımız, kullanıcının tıkladığı yerin RGB değerlerini almak ve getImageData işlevini kullanmamız ve tıklamanın x ve y konumlarını eklememiz gerektiğidir.
var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2];Şimdi R, G ve B değişkenlerinde saklanan bu değerlere sahibiz, ancak bu bilgiyi kolayca okuyabilecekleri bir şekilde kullanıcıya göstermek istiyoruz, böylece bu üç değeri virgülle ayrıştıran bir RGB değişkeni oluşturmamız gerekiyor. Bunu giriş alanlarımızdan birinin değeri olarak sunmak:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});Ve şimdi bunu test ederseniz, zaten tıklattığınız her yerde RGB değerini alan tamamen işlevsel bir renk seçici var, ancak bunu biraz daha iyi hale getirmek için bir işlev ekleyebiliriz. Javascripter RGB değerlerini HEX değerlerine dönüştürür; fonksiyon:
function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}function toHex(n) {n = parseInt(n,10);if (isNaN(n)) return "00";n = Math.max(0,Math.min(n,255));return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);}Şimdi bu fonksiyonu aldık, HEX değerlerini sunmak için tek yapmamız gereken, RBG değerlerimizle fonksiyonu yerine getiriyor ve daha sonra HEX rengi olmak için girdi değerini önceden # ile ve fonksiyonun zaten yerinde olmasıyla ayarlıyoruz. oldukça basit:
// after declaring the RGB variablevar hex = rgbToHex(R,G,B);// after setting the RGB value$('#hex input').val('#' + hex);Colorpicker demo HEX: RGB: Umarım bu derste, tuval ile uygulama oluşturmanın potansiyelini fark etmişsinizdir. Orada çok daha gelişmiş uygulamalar var, insanlar tuvalle oyunlar bile yapıyorlar, bu yüzden keşfedilecek bir şey var çünkü onunla inanılmaz şeyler inşa edebilirsiniz.
Canvas için başka hangi kullanımları buldunuz? Bunu ne için kullanabilmek istersiniz? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, renk seçici resmi Shutterstock üzerinden.