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...

6,925 Responses

  1. Sazrqjz表示:

    Добрый день!
    Процесс получения диплома стоматолога: реально ли это сделать быстро?
    returnrp.listbb.ru/viewtopic.php?f=70&t=722
    Поможем вам всегда!.

  2. Xazrhyu表示:

    Добрый день!
    Как не попасть впросак при покупке диплома колледжа или ПТУ в России
    landik-diploms-srednee.ru/diplom-s-reestromkupit-kupit  
    Удачи!

  3. Cazrlip表示:

    Добрый день!
    Мы готовы предложить документы техникумов, расположенных на территории всей РФ. Можно купить диплом за любой год, указав необходимую специальность и оценки за все дисциплины. Документы выпускаются на “правильной” бумаге высшего качества. Это дает возможности делать настоящие дипломы, не отличимые от оригиналов. Документы будут заверены всеми обязательными печатями и подписями.
    jointsnmotion-hub.mn.co/posts/61837773

  4. Eanrtuo表示:

    Привет!
    Мы предлагаем дипломы психологов, юристов, экономистов и прочих профессий по приятным ценам.
    yasqueencommunity.com/blogs/339/%D0%92%D1%8B%D0%B1%D0%B8%D1%80%D0%B0%D0%B5%D0%BC-%D0%BD%D0%B0%D0%B4%D0%B5%D0%B6%D0%BD%D1%8B%D0%B9-%D0%BE%D0%BD%D0%BB%D0%B0%D0%B9%D0%BD-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD-%D1%81-%D0%B4%D0%B8%D0%BF%D0%BB%D0%BE%D0%BC%D0%B0%D0%BC%D0%B8

  5. Dnrtpse表示:

    Привет, друзья!
    Заказать документ о получении высшего образования вы имеете возможность в нашей компании в Москве.
    diplomasx24.ru/kupit-diplom-vracha
    Удачи!

  6. Diplomi_heet表示:

    купить диплом об окончании университета diplomyx.com .

  7. Diplomi_thKn表示:

    купить диплом образования в иркутске купить диплом образования в иркутске .

  8. Mazryhd表示:

    Здравствуйте!
    Купить диплом любого ВУЗа
    russiajoy.ru/vash-diplom-za-den-legalno-i-dostupno

  9. Lazrzlj表示:

    Добрый день!
    Где приобрести диплом по нужной специальности?
    Приобрести диплом любого ВУЗа.
    clubalameda.com/index.php/cb-profile/pluginclass/cbblogs?action=blogs&func=show&id=116

  10. Pazrngs表示:

    Здравствуйте!
    Мы изготавливаем дипломы любой профессии по приятным тарифам. Стоимость может зависеть от выбранной специальности, года выпуска и университета.
    arusak-diploms-srednee.ru/kupit-diplom-kandidata-nauk  
    Успехов в учебе!

  11. Cazrtit表示:

    Привет, друзья!
    Купить диплом любого университета.
    Мы готовы предложить документы ВУЗов, расположенных в любом регионе России. Вы можете купить диплом за любой год, включая документы СССР. Документы выпускаются на бумаге самого высшего качества. Это дает возможность делать государственные дипломы, которые не отличить от оригинала. Документы заверяются всеми обязательными печатями и подписями.
    humansnet.com//read-blog/361_kak-vozmozhno-bystro-zakazat-diplom-v-internet-magazine.html

  12. Oh my goodness! Impressive article dude! Thanks, However I am going through problems with your RSS. I don’t understand the reason why I can’t join it. Is there anybody else getting similar RSS problems? Anyone that knows the answer will you kindly respond? Thanx.

  13. Razrzba表示:

    Привет!
    Мы предлагаем приобрести диплом высочайшего качества, который невозможно отличить от оригинального документа без использования дорогостоящего оборудования и квалифицированного специалиста.
    xn--48-6kcd0fg.xn--p1ai/forums.php?m=posts&q=22239&n=last#bottom
    Хорошей учебы!

  14. Diplomi_hzEa表示:

    Привет, друзья!
    Купить документ ВУЗа можно в нашей компании в столице.
    ast-diplom24.ru/kupit-diplom-rostov-na-donu

  15. Yreflkv表示:

    Привет, друзья!
    Приобрести диплом о высшем образовании.
    avtovideotest.ru/vash-diplom-kachestvo-i-podlinnost
    Успехов в учебе!

  16. Trefjbd表示:

    Привет, друзья!
    Приобретение школьного аттестата с официальным упрощенным обучением в Москве
    dvnshu.com/index.php?subaction=userinfo&user=uwalu
    Поможем вам всегда!.

  17. Danrqrt表示:

    Здравствуйте!
    Где заказать диплом по актуальной специальности?
    Мы изготавливаем дипломы любой профессии по приятным ценам.
    u-cars.ru/modules.php?name=Your_Account&op=userinfo&username=oqorisol

  18. WilliamDeeli表示:

    Добрый день!
    Мы предлагаем выгодно и быстро заказать диплом, который выполняется на оригинальной бумаге и заверен печатями, штампами, подписями должностных лиц. Наш диплом способен пройти любые проверки, даже с использованием специфических приборов. Достигайте своих целей максимально быстро с нашей компанией.
    obmenka.forum2x2.ru/t17060-topic#38554
    Успехов в учебе!

  19. Diplomi_iokl表示:

    купить диплом ссср в ростове на дону asxdiplomik24.ru .

  20. Uazrpgv表示:

    Привет, друзья!
    Где приобрести диплом специалиста?
    http://www.import-moto.com/users/88
    Удачи!

  21. Diplomi_glkl表示:

    купить егэ с занесением в реестр http://www.diploms-x.com .

  22. Uazrlsk表示:

    Добрый день!
    Приобрести диплом любого ВУЗа.
    myworldgo.com/blog/108040/chto-imenno-neobxodimo-iz-oborudovaniya-dlya-sozdaniya-diploma

  23. Manrqwf表示:

    Привет, друзья!
    Где заказать диплом специалиста?
    Мы предлагаем документы ВУЗов, которые находятся на территории всей России. Можно приобрести диплом за любой год, указав необходимую специальность и хорошие оценки за все дисциплины. Дипломы делаются на “правильной” бумаге высшего качества. Это позволяет делать настоящие дипломы, которые не отличить от оригинала. Документы заверяются необходимыми печатями и штампами.
    Мы изготавливаем дипломы психологов, юристов, экономистов и прочих профессий по приятным тарифам.
    ast-diplomas24.ru/kupit-diplom-o-srednem-obrazovanii
    Рады помочь!

  24. Wazrycb表示:

    Привет, друзья!
    Мы можем предложить документы техникумов, расположенных на территории всей России. Можно приобрести диплом от любого заведения, за любой год, указав подходящую специальность и оценки за все дисциплины. Документы делаются на “правильной” бумаге самого высшего качества. Это дает возможность делать настоящие дипломы, не отличимые от оригиналов. Они заверяются необходимыми печатями и штампами.
    lolipopnews.ru/page/9

  25. This is the perfect website for everyone who wants to understand this topic. You know a whole lot its almost tough to argue with you (not that I actually will need to…HaHa). You certainly put a brand new spin on a subject that’s been discussed for ages. Great stuff, just great.

  26. Zazrxvh表示:

    Добрый день!
    Приобрести документ ВУЗа вы можете в нашей компании. Мы оказываем услуги по производству и продаже документов об окончании любых ВУЗов Российской Федерации. Вы сможете получить необходимый диплом по любым специальностям, включая документы старого образца.
    niagarafallspal.com/read-blog/922
    Успешной учебы!

  27. Hrxohr表示:

    purchase atenolol without prescription – order betapace 40mg generic oral carvedilol 6.25mg

  28. Diplomi_exet表示:

    можно ли диплом магистра купить diplomyx.com .

發佈留言

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