HTML5 Canvas標籤範例

隨著時代的進步,HTML的版本一直在進化,目前比較新的版本應該就是HTML5了,這次的HTML5針對許多標籤進行調整,當然也新增了一些標籤,主要的目的是希望可以將一些本來需要利用Flash才可以完成的互動頁面取而用HTML5來進行設計,這樣比較能減輕網頁的負載,但不管怎麼進步,其最重要的目的當然還是要網友能夠看到才行!

目前各家的瀏覽器對於HTML5的支援都不一,如果想要測試看看自己所使用的瀏覽器對HTML5的支援程度,可以到這個網址測試,馬老師針對目前的三款瀏覽器(IE9、Firefox6、Chrome13)來做了測試,IE9於HTML5中測試得到了以下的分數:

IE9於HTML5中測試分數

Firefox6於HTML5中測試得到了以下的分數:

Firefox6於HTML5中測試分數

Chrome13於HTML5中測試得到了以下的分數:

Chrome13於HTML5中測試分數

所以用以上的結果來看,目前是Google Chrome對於HTML5的支援最好,不過也只是拿了450分中的340而已,所以是否要全面改用HTML5來開發,還是應該要好好的斟酌一下,但是先了解HTML5能做到的功能,一定是沒問題的!以下就是馬老師針對HTML新增的畫布標籤製作的範例,不過因為瀏覽器支援的關係,必須使用Chrome觀賞才會是比較完整的功能喔!

範例觀賞頁面

範例影片:

PS:本範例的網頁所使用的圖檔為寬:800、高:600的圖檔,並將圖檔至於img的資料夾中

網頁程式碼:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<script>

var context;
var x = 0;
var ind;
var offset;
var photos = new Array();

for(var i=1;i<=13;i++){
	var im = new Image();
	im.src = "img/p" + i + ".jpg";
	photos.push(im);
}

function slideshow(){
	context = document.getElementById('canvas').getContext('2d');
	setInterval(loop,10);
}

function loop(){
	x += (slider.value - x) * 0.1;
	ind = Math.floor(x/800);
	offset = x % 800;
	context.drawImage(photos[ind], offset, 0, 800-offset, 600, 0, 0, 800-offset, 600);
	context.drawImage(photos[ind+1], 0, 0, 800, 600, 800-offset, 0, 800, 600);
}

</script>
</head>
<body onLoad="slideshow()">

<canvas width="800" height="600" id="canvas"></canvas><br />
<input type="range" id="slider" style="width:800px;" min="0" max="9600" step="1" value="0">

</body>
</html>

You may also like...

10,030 Responses

  1. Профессиональный сервисный центр по ремонту плоттеров в Москве.
    Мы предлагаем: ремонт плоттера в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  2. джокер безумие на двоих,джокер безумие
    на двоих фильм,джокер безумие на двоих 2024,
    джокер безумие на двоих фильм 2024,джокер безумие на двоих смотреть,джокер безумие на двоих онлайн,
    джокер безумие на двоих смотреть
    онлайн,смотреть фильм джокер безумие на
    двоих,смотреть джокер безумие на двоих 2024,джокер безумие на
    двоих дата,фильм джокер безумие на двоих 2024 смотреть,джокер безумие на двоих выход,джокер безумие на двоих дата выхода,смотреть джокер безумие на
    двоих бесплатно,джокер 2 безумие на двоих,джокер безумие на двоих онлайн бесплатно,
    джокер безумие на двоих смотреть онлайн бесплатно,джокер безумие на двоих фильм онлайн,джокер 2024,джокер фильм 2024,
    джокер на двоих фильм
    2024,пила джокер 2024,пила джокер фильм
    2024,смотреть джокер 2024,смотреть
    фильм джокер 2024,джокер 2024 смотреть
    онлайн,фильм джокер безумие на двоих,джокер на двоих фильм,джокер 2,смотреть джокер,джокер онлайн,джокер смотреть онлайн,джокера
    бесплатно. джокер безумие на двоих,джокер безумие на двоих фильм,джокер безумие на двоих 2024,джокер безумие на двоих фильм 2024,джокер безумие на двоих смотреть,джокер безумие на двоих онлайн,джокер безумие на двоих смотреть онлайн,смотреть фильм джокер безумие на двоих,смотреть джокер безумие на двоих 2024,джокер безумие на двоих дата,фильм джокер безумие на двоих 2024 смотреть,джокер безумие на двоих выход,джокер безумие на двоих дата выхода,смотреть джокер безумие на двоих бесплатно,джокер 2 безумие на двоих,джокер безумие на двоих онлайн бесплатно,джокер безумие на двоих смотреть онлайн бесплатно,джокер безумие на двоих фильм онлайн,джокер 2024,джокер фильм 2024,джокер на двоих фильм 2024,пила джокер 2024,пила джокер фильм 2024,смотреть джокер 2024,смотреть фильм джокер 2024,джокер 2024 смотреть онлайн,фильм джокер безумие на двоих,джокер на двоих фильм,джокер 2,смотреть джокер,джокер онлайн,джокер смотреть онлайн,джокера бесплатно – джокер безумие на двоих,джокер безумие на двоих фильм,джокер
    безумие на двоих 2024,джокер безумие на двоих фильм 2024,джокер безумие на двоих смотреть,джокер безумие на
    двоих онлайн,джокер безумие на двоих смотреть онлайн,смотреть фильм джокер безумие на двоих,смотреть
    джокер безумие на двоих 2024,джокер безумие на двоих дата,фильм джокер безумие на двоих 2024 смотреть,джокер
    безумие на двоих выход,джокер безумие на двоих дата выхода,смотреть джокер
    безумие на двоих бесплатно,джокер 2 безумие на двоих,
    джокер безумие на двоих онлайн бесплатно,джокер безумие на двоих
    смотреть онлайн бесплатно,джокер безумие на двоих фильм онлайн,джокер 2024,джокер фильм 2024,джокер на
    двоих фильм 2024,пила джокер 2024,пила джокер фильм 2024,смотреть джокер 2024,смотреть фильм джокер 2024,джокер
    2024 смотреть онлайн,фильм джокер безумие на двоих,джокер на двоих фильм,джокер 2,смотреть джокер,джокер онлайн,джокер смотреть онлайн,джокера бесплатно.

  3. Charlesrab表示:

    Pharmacie sans ordonnance Pharmacies en ligne certifiees pharmacie en ligne pas cher

  4. HeathZex表示:

    Viagra gГ©nГ©rique sans ordonnance en pharmacie: Acheter du Viagra sans ordonnance – Viagra homme prix en pharmacie

  5. Профессиональный сервисный центр по ремонту серверов в Москве.
    Мы предлагаем: ремонт серверных материнских плат
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  6. Stephengen表示:

    http://clssansordonnance.icu/# pharmacie en ligne avec ordonnance

  7. Профессиональный сервисный центр по ремонту принтеров в Москве.
    Мы предлагаем: починить принтер москва
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  8. HeathZex表示:

    п»їpharmacie en ligne france: cialis prix – pharmacie en ligne livraison europe

  9. Xwinch表示:

    generic deltasone 10mg – buy prednisone 5mg generic order zovirax generic

  10. I have learned some significant things through your blog post post. One other subject I would like to convey is that there are lots of games on the market designed mainly for preschool age kids. They include pattern acceptance, colors, pets, and designs. These usually focus on familiarization instead of memorization. This keeps little children engaged without having the experience like they are learning. Thanks

  11. Hmm it seems like your website ate my first comment (it was extremely long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog. I too am an aspiring blog blogger but I’m still new to the whole thing. Do you have any points for novice blog writers? I’d definitely appreciate it.

  12. Good web site you have here.. It’s hard to find high quality writing like yours these days. I honestly appreciate individuals like you! Take care!!

  13. Charlesrab表示:

    pharmacie en ligne fiable Pharmacie sans ordonnance pharmacies en ligne certifiГ©es

  14. HeathZex表示:

    Viagra prix pharmacie paris: Acheter du Viagra sans ordonnance – Viagra homme prix en pharmacie sans ordonnance

  15. Профессиональный сервисный центр по ремонту объективов в Москве.
    Мы предлагаем: объектив ремонт
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  16. An intriguing discussion is worth comment. There’s no doubt that that you should publish more on this subject, it may not be a taboo matter but generally folks don’t discuss such topics. To the next! Best wishes.

  17. Профессиональный сервисный центр по ремонту плоттеров в Москве.
    Мы предлагаем: сервис по ремонту плоттеров
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  18. HeathZex表示:

    pharmacies en ligne certifiГ©es: vente de mГ©dicament en ligne – vente de mГ©dicament en ligne

  19. The higher rig depend in addition to higher efficiency in well completion rates will assist grow Permian manufacturing in the second half of the 12 months, Jeff Woodbury, head of investor relations, mentioned on a conference call Friday with out offering details.

  20. However, with no wear and tear seen after our test period, these sneakers are more likely to last a very long time and are both light and packable sufficient to make them the perfect touring companion.

  21. Another nice factor in regards to the Allbirds Tree Runners is the fact that it proved to be a dependable walking accomplice for us even throughout our longer sessions.

  22. Please submit what you will have for inclusion on this USGenWeb site, as it’s not dependent on one particular person, and will not disappear.

  23. 訴える事表示:

    This lack of management makes it easier to prove it is out of your property should a creditor come knocking.

  24. She was certain she ought to never be nicely once more, until she had a few of these apples that grew in the orchard close to the castle where the man’s brothers lived; only she had nobody to send for them.

  25. So, you’re going to take the household to Universal Studios and are questioning what else to do after visiting the theme park.

  26. If you understand the place to look, you’ll be able to all the time discover UGG boots sale.

  27. Home-elves are small humanoid creatures who normally belong to wealthy Wizarding families.

  28. Darwin’s theories not only presented a world the place pure choice drove the steady modification of species, but additionally prompt that humans shared frequent ancestry with the remainder of the animal kingdom.

  29. Graduate colleges sometimes call money paid to a scholar for educating or research a fellowship.

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。