5 Kasım 2013, Salı

Bootcamp 1 - Dikdörtgen Yöntemleri Ve 2D Context Nesne Tuval

Kampüs çizme kampında ilk egzersiz hoşgeldiniz Başlamadan bu ilk egzersizleri kampüs programlamada yeni iseniz eğitim Hepimizin kontrolünü sağlamak için JavaScript kullanan ve bizim kampüse varlıklar çıplak kemikleri bir html5 web belgesine sahip olan başlayacağım gövde elemanının içinde ben de devam edin ve benim kampüs öğesi eklemek değilim Orada açılış etiketi ve sonra kapanış kampüs etiketi koymak ve nitelikleri biz bunun için başvurabilirsiniz böylece kimliğini ayarlamak istediğiniz ve bir javascript bizim CSS değil, aynı zamanda kırbaç ve ayrıca CSS ile yapabileceğiniz hangi yüksek belir

tilen ama bazen beklenmeyen sonuçlar alırsınız Eğer tuval elemanın kendisi ile yüksek belirtmek ve yoksa Ayrıca yükseklik nitelikleri eşit olmasını sağlamak verilen 300 bu yüzden bir fikirle geniş 400 var benim kampüs b

ir kampüs var 300 yükseklik ben size kampüs ettik düşünebilirsiniz sorta senin gibi olurdu şimdi baş elemanı bir sahne Ben vücudu etkiler gidiyor bir stil etiketi olacak koymak kulüpler elemanı ve vücut ya

“Ders Kodu: http://www.developphp.com/video/JavaScript/2D-Context-Object-and-Rectangle-Methods Tuval Bootcamp ilk egzersiz hoş geldiniz. Eğer eleman programlama tu...”
Adam Khoury

şları verdi bu yüzden benim tuval öğesi yaptım bir marj 40 piksel sadece bu yüzden benim kampüs sol üst köşeye sıkışmış değil ve gri arkaplan i tuval öğesi için kulüpler Ben baş elemanı şimdi bunu bir beyaz arka plan ve siyah sınır vazgeçti biz Ayrıca gerek komut elemanı bir çift cihazı aşağı gitmek ve bunu kapatmak emin olun Script elemanı ve bizim yapmak istediğimiz ilk şey, yük pencere nokta ise Bir işlevi çağrıldığında berabere olay onun biyo çok doğal yukarıda

Bootcamp 1 - Dikdörtgen Yöntemleri Ve 2D Context Nesne Tuval Resim 1 Bootcamp 1 - Dikdörtgen Yöntemleri Ve 2D Context Nesne Tuval Resim 2 Bootcamp 1 - Dikdörtgen Yöntemleri Ve 2D Context Nesne Tuval Resim 3 Bootcamp 1 - Dikdörtgen Yöntemleri Ve 2D Context Nesne Tuval Resim 4

bir işlevi gerekir adlı damla açık kapa parantez küme ayracı açılış açılı Alexa küme ayracı kapanış girişi sunan özellikleri şimdi beraberlik işlevi koymak nedeni Biz bu istiyorum çünkü motor üzerinde pencere nokta olarak daha sonra tüm varlık penceresine yüklendiğinde ateşlemesi işlev Eğer program çalışırsanız eğer olabilir kampüs elemanı dahil, ancak onun kimliği bu tuval elemanına o pencereye yüklenir önce ne yapmamız biz sadece koymak yani başarısız olacak ve onload olay ve biz bu kampüse çizebilirsiniz Windows değil tüm yükle

nen bitirdikten sonra o kadar sadece uyarı anlamı Bunu çalıştırdığınızda kendinizi tam burada bazı tür ileti bu hakkı görürsünüz sayfa yüklendiğinde o merhaba yaptığınız mesajını veriyor Bu yük olay pencere nokta var ve yük olay aşağı pencere nereye normalde olduğu karmaşık uygulamaları başlatmak veya karmaşık animasyonlar veya oyunlar % uh fonksiyonun içinde koyacağım konum ilk şey bir referanstır bizim kampüs oluşturma bağlamı 2d nesne ve biz barda CTX diyerek o kazanır bağlam için kısa olan nokta belgelemek eşittir eleman kötü kimliği almak sadece kampüs hedeflemek istediğiniz söylüyorlar kimliği koymak Daha sonra tek veya çift tırnak arasına aldık demek Bu erişim almak nasıl yani d bağlam olsun kampüs oluşturma bağlamı 2d nesnesine Şimdi ne olduğunu bir yapıcı ve JavaScript Bu özellikleri ve biz yöntemlerin bir listesi vardır erişim üzerinde yaptığınız her şey böylece kampüs belirli hedeflere ulaşmak için kampus Bu CTX nesnesi aracılığıyla yapılacak gidiyor olduğunu hangi bir anlık hücrenin bir kampüs oluşturma bağlam Nesne ve düz bir yüzey temsil 2d Kökeni 00 0 fuar 0Y pozisyonları sol üst kısmında temelde olduğunu Eğer doğru gitmek gibi ve X değerleri artırmak aşağı gitmek gibi ve y değerleri artırmak Doğru UX gitmek gibi bir artış değerleri yani ve y değeri artar giderken ve NZ X neden çalışabilirsiniz Kampüste ekseni ve bazen görürsünüz kampüs kendisi için bir değişken yapma yazarlar ve sonra bir sonraki çizgi aşağı bunun için bağlam 2d alırsınız ama sadece böyle bir satır hepsini yapabilir ve hiç referans bu geri gerekiyorsa Yeni kod yüzden almak istiyorum örneğin söylüyorlar yapmak için tuval eleman kolay ile Kimliği ne olursa olsun yukarı kampüs Bu CTX ile Nesne temsil veya bayan karşılık sadece için kendimize bir uyarı vermek test amaçlı Sadece CTX nokta tuval gidebilir Şimdi kampüs erişebileceğiniz bir özelliktir Bu geri gelen kampüs referans sağlayacak CTX nesnesi ile aynı olup olmadığını bu yüzden sadece kampüs nokta kimliğini söyleyebiliriz ve bu fikre bana kampüs verecek ve ben o dize küçük bir bar sembolü birleştirilmiş olabilir ve sonra ben CTX nokta tuval söylerim ile nokta ve sonra aynı şeyi, sadece edeceğiz En sevdiğiniz Modern tarayıcınızda şimdi bu çalıştırmak böylece hype dışarı listelemek için ve biz ID benim kampüs olsun görmek 400 Anna yüksekliği 300 bir bu yüzden biz o kampüs tekabül gereken tüm değerlerini almak içinden CTX nesne siz de her CTX nesne belirtmek olduğunu ve daha sonra bunu kampüs özelliğine erişmek ve sonra ah o belirli kampüs tüm özelliklerini% erişebilirsiniz Aslında gerek yok eleman kampüs yukarıda için değişken yapmak CTX değişken Gerçekten kimliği erişebilirsiniz çünkü bunu yapmak zorunda değilsiniz ile doğrudan CTX nesnesi üzerinden bu kampüs elemanı Hyde içinde tamam şimdi ben sadece biz test için koymak bu uyarıyı açıklama gidiyorum amaçları Biz üç yöntem tartışmak da bu ilk dersi olan yapıyoruz oluşturmak için CTX nesnesine kullanılabilir olduğunu Kampüste acil dikdörtgenler biz yapacağız ilk şey CTX demek yani Bir eksen T ile nokta phil recht Phil recht yöntemi ve Phil dikdörtgen yöntemi alır dört parametre veya dört argüman X neden olan ve yükseklik X için henüz neden olan ve yüksekliği fuar böylece ve ben diyelim de is başlamak benim dikdörtgen kazandı 20 ve daha sonra y konumu o değil bu şekilde de yirmi bir 00 uyarınca üst sol köşesinde kampüse biraz köşesinde itti olacak 20 piksel ve I dikdörtgen olmasını isteyip % 100 ve aynı zamanda yüksek 102 biraz kare olacak olan Bizim iyilik tarayıcıda bu bakarsanız şimdi bir küçük kare var Bu 100 ile 100 var ve onun kenarları 20 piksel 20 piksel da y pozisyonunda söze Şimdi en biz başka bir küçük dikdörtgen damla istiyorum diyelim biz kopyalayıp en biz bunu istiyorum diyelim edebilirsiniz darden fuar 200 NY pozisyon 100'e kadar ama biz sadece 50 genişliğinde olmak istedim ve elli yüksek küçük dikdörtgen favori tarayıcı olmadığını kontrol etmek Eğer tam olarak nerede size pozisyon dikdörtgenler hem sahip olduğunu görebilirsiniz onları Phil recht yöntemi nasıl çalıştığını bu yüzden şimdi de bir şey var denilen İnme harap yöntem böylece biz koymak gerekir hepsi Bu bir altında inme bu değişecek harap inme koyacağız Eğer yapmak istiyorsanız ve inme istediğini dikdörtgen civarında olduğu bu etrafında istiyorum dikdörtgenler olmak inme olmak Sadece o aynı kesin koordinatları vermek Bu ne yaptım ki dikdörtgenler ve şimdi bu bakarken bile olmaz çünkü onu görmek her şey biraz bir sınır görebilirsiniz gri siyah Ben ne yapacağım o siyah etrafında kenar benim küçük için Phils tarzı vereceğim olduğunu dikdörtgenler Otobüs AC TX nokta Phil tarzı Bu eşit ve daha sonra ben sadece bir yaka edelim koymak koyabilirsiniz Eflatun şimdi Ben Phil stilleri ve inme hakkında daha sen guys konuşuyor olacağım stilleri sonraki derslerde ama şimdi biz öylece kapağı sensin üç Javascript dikdörtgen yöntemler yani şimdi o benim küçük dikdörtgenler hem gidiş eflatun rengi olmak şimdi gerekir biraz daha iyi kontrol edilmiş inme bakın T etrafında daha biraz kutusuna inme görebilirsiniz Şimdi küçük adam etrafında başka inme koymak istedim Bu küçük kutu ben inme tekrar can ve o küçük kutu aynı koordinatları ve aynı boyutlara sahip Boyun hem etrafında inme ve bir şey hattı denilen de var ile doğrultusunda gibi mülkiyet ve diğer özellikler ve Phil tarzı edeceğim daha sonra tamam o yüzden bir sürü gitmek iletide bir tek daha var CTX nesneye erişecek bu bir net harap yöntem Eğer bir silgi falan gibi bu düşünebilirsiniz Belirtilen dahilinde kampüs silin böylece aynı zamanda X neden olacağını Dikdörtgen ve yüksekliği bu yöntemlerin her üç Phil recht inme harap ve net harap hepsi aynı parametre ayarlarının verilecek vardı X-Y ile ve yutturmaca İstediğim yere başlamak için açık batık sol üst köşede yer almaktadır Diğerleri 0 olabilir ve bu yüzden 0 0 X & Y sol üst köşede kampüs de koyacağız için ve biz hemen hemen silmek konum temizlemek istedim 100 piksel ve politika bu verecekti C & C biz de dikdörtgenler şimdi tekrar çizilmiş çevrelerindeki inme sahiptir var ve daha sonra net bir harap var yöntem hemen hemen öyleydi ne yaptım burada çalıştırılan Eğer tüm kampüsü silmek istiyorsanız kampüsü ayırdı olduğunu sildim sen sadece CTX erişebilirsiniz koyabilirsiniz Eğer bu değeri koyabilirsiniz ile kamp başlangıç burada ve daha sonra yutturmaca koymak Burada ne yapar onu tüm kampüs izlemek temizler olduğunu Senin şekiller T başlangıçta çizildi ama sonra onlar 100 sırtlarını bırakmak sildim var 100 bu şekilde aslında efekt eğik dik görebilirsiniz Genellikle bu animasyonlar sırasında tüm kampüsü temizlemek için kullanılır veya interaktif silgi oluşturma Tamam böylece size CTX kullanabileceğiniz JavaScript üç yöntem olduğunu nesne O hemen dikdörtgen oluşturmak için başka yollar var yolları açılan ve doldurabilirsiniz dikdörtgenler olacak yolları inşa ancak bu CTX sadece üç yöntemlerdir acil dikdörtgenler oluşturmak nesne Ben bu yüzden CTX nesnesi kurmak için nasıl göstereceğim o ve beraberlik fonksiyonu içinde tüm çizim koymak O Moda bükük pencere nokta kullanır Eğer baş elemanı% olarak bir kapak javascript uydurabilecek bu şekilde uh görünümü belge Yeni JavaScript kampüs elemanı altına gitmek zorunda değildir tamam bu tam egzersiz numara.

Açıklama

Ders Kodu: http://www.developphp.com/video/JavaScript/2D-Context-Object-and-Rectangle-Methods Tuval Bootcamp ilk egzersiz hoş geldiniz. Eğer eleman programlama tuvale yeni iseniz, bu ilk egzersiz sizin eğitime başlayabilirsiniz yerdir. Biz bizim tuvaline tüm kontrol ve varlıklarını sağlamak için JavaScript kullanabilirsiniz. Bu ilk uygulamada üç derhal dikdörtgen yöntemleri kapsayacak ve geri gelen tuval öğesi atıfta 2D içerik nesnesi ve tartışacağız.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.9/10

  • 161
    Olumlu
  • 1
    Olumsuz
  • 19
    Yorum
  • 16822
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Makeup Lover

    Makeup Lover

    12 HAZİRAN 2011
  • Rooster Teeth

    Rooster Teet

    11 Temmuz 2006
  • Top Gear

    Top Gear

    27 Mart 2006

ANKET



Bu sayfa işinize yaradı mı?