Etiketi <canvas> HTML5

Yeni etiket bir etiket <canvas> HTML5 çizmek ve grafiklerle çalışma için kullanılabilir önceki sürümleri mevcut değildir.

Etiketi <canvas> düzgün ve tam potansiyelini gerçekleştirmek için JavaScript gibi bir betik dili desteği gerekir.

Bu makalenin amacı, yeni etiketler temel kullanımını göstermek için, ancak pratik örnekler sürekli kullanımı ile gelişmiş bazı noktalarda, umarım, öğrenmeyi kolaylaştıracaktır.

Öncül

En iyi tuval mutlak bir yenilik tüm tarayıcılar tarafından desteklenmez, bu nedenle bu makalede gösteri örnekler doğru görüntülenmiyor mümkündür.
Test Herhangi bir sorun yaşamamış olduğunuz Google Chrome ile gerçekleştirildi.

Etiketi <canvas> kullanın

Canvas etiketinin yaygın kullanımı oldukça basit ve diğer HTML etiketleri farklı değildir.
Resmen Tuval basit bir konteyner ve, gibi, açılış etiketiyle (<canvas>) ve kapanış (</ Canvas>) vardır:

 <canvas id="esempio" width="196" height="96">

 





 Eleman desteklenmiyor







 </ Canvas>

Boyutları açıkça belirtilen değilse (nitelikleri genişlik ve yükseklik kullanarak) konteyner atanan boyutu varsayılan, yüksekliği 300 ve 150 ile temel dikdörtgendir.
Id niteliği, tabii ki, bence, her zaman sayfada kullanılan her nesne için benzersiz bir referans olması aramak için iyi bir fikirdir, önemli değil.

Grafik tarayıcınız tarafından desteklenmiyor zaman dikkat temsil <canvas> ve </ tuval> tarafından metin kısmı ayrılmış gösterir.

Uygulama detayları başlamadan önce canlı test için basit bir kod ile tuval potansiyel testi:

 <canvas id="bandierina" width="180" height = "100"> </ Canvas Desteklemiyor>







 <script type="text/javascript">







 var tuval = document.getElementById ('bayrak');







 var c = canvas.getContext ('2 d ');







 c.fillStyle = '# FF0000';







 c.fillRect (0,0,180,100);







 c.fillStyle = '# FFFFFF';







 c.fillRect (0,0,120,100);







 c.fillStyle = '# 00FF00';







 c.fillRect (0,0,60,100);







 </ Script>

Üzerinde bu sayfada bu kodu (eğer, bir kez daha, HTML 5 destekleyen bir tarayıcı olması gerekir, doğru çıkış görmek için) bir sonucu görebilirsiniz.

Daha önce bu kod bölümünde makalenin başında açıklanan tuval çalışma bir komut dosyası kullanarak bu açık bir gerçektir. Bu örnekten hemen nesneyi tuval arka plan değişkenler ayıklamak için standart teknik not edebilirsiniz:

 / / ID ile tuval öğesi oluşturma







 var tuval = document.getElementById ('bayrak');









 / / Tuval üzerine yeni bir iki boyutlu nesne oluşturma







 var c = canvas.getContext ('2 d ');

Javascript getElementById yöntem, id alanının değeri üzerinden, bir değişken tuval içinde nesne saklar; getContext ('2 d ') içerik veya programcı olarak tuval çalışmak için bir dizi yöntem sunan bir nesne alır (Eğer iki boyutlu grafik fonksiyonları yani 2D çalışmak istediğiniz kez) seçin.

İlerleyen sayfalarda bu programcı için yararlı bazı temel işlemler tuval yararlanmak niyetinde listeler.

• <<
• 1
• 2
• 3
• 4
• 5
• >>