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

18,440 Responses

  1. MicahTails表示:

    mexico drug stores pharmacies: UsMex Pharm – mexican online pharmacies prescription drugs

  2. Cletusiders表示:

    usa mexico pharmacy: usa mexico pharmacy – pharmacies in mexico that ship to usa

  3. Cletusiders表示:

    UsMex Pharm: USMexPharm – Mexican pharmacy ship to USA

  4. Jariorgoh表示:

    Где приобрести диплом по актуальной специальности?
    Наша компания предлагает выгодно и быстро заказать диплом, который выполняется на бланке ГОЗНАКа и заверен печатями, штампами, подписями. Данный диплом пройдет любые проверки, даже с применением профессиональных приборов. Решайте свои задачи быстро и просто с нашими дипломами.
    Купить диплом о высшем образовании kupitediplom0027.ru/kupit-diplom-v-penze-6/

  5. I completely agree with this perspective. There’s an in-depth post on sumclub that elaborates on the same topic, offering useful points to support your view.

  6. RandyKargo表示:

    certified Mexican pharmacy mexico drug stores pharmacies certified Mexican pharmacy

  7. DennisDor表示:

    Mexican pharmacy ship to USA: Mexican pharmacy ship to USA – Us Mex Pharm

  8. RandyKargo表示:

    Us Mex Pharm mexican rx online usa mexico pharmacy

  9. Mazrpsr表示:

    Где заказать диплом по актуальной специальности?
    Готовый диплом с необходимыми печатями и подписями отвечает стандартам, никто не отличит его от оригинала. Не стоит откладывать свои цели на потом, реализуйте их с нами – отправляйте быструю заявку на диплом сегодня! Диплом о среднем образовании – запросто! arpop.com/forum/index.phptopic=25008.0

  10. установка протеза зуба protezirovanie-zubov1.ru .

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

  12. Cletusiders表示:

    Us Mex Pharm: usa mexico pharmacy – Mexican pharmacy ship to USA

  13. стоматологическое протезирование зубов цена http://protezirovanie-zubov2.ru/ .

  14. SteveViand表示:

    http://usmexpharm.com/# Us Mex Pharm

  15. MicahTails表示:

    medication from mexico pharmacy: Us Mex Pharm – certified Mexican pharmacy

  16. 1win_hfsi表示:

    1win moldova download 1win moldova download .

  17. Dnrtfxp表示:

    Мы можем предложить дипломы любой профессии по приятным ценам. Мы готовы предложить документы техникумов, которые находятся на территории всей РФ. Дипломы и аттестаты делаются на бумаге самого высокого качества. Это позволяет делать государственные дипломы, которые невозможно отличить от оригиналов. nashforum.listbb.ru/viewtopic.phpf=6&t=26647

  18. SteveViand表示:

    https://usmexpharm.shop/# Mexican pharmacy ship to USA

  19. Diplomi_xqEa表示:

    Приобрести диплом любого университета!
    Мы предлагаем документы учебных заведений, расположенных в любом регионе Российской Федерации.
    diplom4you.com/kupit-diplom-s-vneseniem-v-reestr-bistro-i-nadezhno-15/

  20. DennisDor表示:

    mexican pharmacy: Mexican pharmacy ship to USA – buying from online mexican pharmacy

  21. RandyKargo表示:

    certified Mexican pharmacy mexican pharmacy buying prescription drugs in mexico online

  22. DennisDor表示:

    Mexican pharmacy ship to USA: Mexican pharmacy ship to USA – UsMex Pharm

  23. Cletusiders表示:

    mexico pharmacies prescription drugs: buying from online mexican pharmacy – USMexPharm

  24. Sazrxgq表示:

    Купить документ ВУЗа вы можете в нашей компании. Мы оказываем услуги по производству и продаже документов об окончании любых ВУЗов РФ. Вы сможете получить необходимый диплом по любым специальностям, любого года выпуска, включая документы СССР. Даем гарантию, что при проверке документа работодателями, каких-либо подозрений не возникнет. diplomidlarf.ru/kupit-diplom-s-reestrom-v-moskve-bistro-i-udobno-2/

  25. Uazrmng表示:

    Доброго времени суток!
    Для определенных людей, заказать диплом о высшем образовании – это необходимость, шанс получить достойную работу. Но для кого-то – это очевидное желание не терять огромное количество времени на учебу в универе. С какой бы целью вам это не потребовалось, мы готовы помочь вам. Максимально быстро, качественно и по доступной цене сделаем диплом нового или старого образца на подлинных бланках со всеми необходимыми печатями.
    Основная причина, почему многие покупают документ, – получить хорошую должность. Например, знания позволяют специалисту устроиться на работу, однако документального подтверждения квалификации нет. Когда для работодателя важно наличие “корочек”, риск потерять вакантное место очень высокий.
    Приобрести документ о получении высшего образования можно в нашем сервисе. Мы оказываем услуги по производству и продаже документов об окончании любых ВУЗов РФ. Вы получите диплом по любым специальностям, любого года выпуска, в том числе документы образца СССР. Гарантируем, что при проверке документов работодателем, подозрений не появится.
    Ситуаций, которые вынуждают купить диплом ВУЗа достаточно. Кому-то очень срочно потребовалась работа, а значит, необходимо произвести хорошее впечатление на руководителя на протяжении собеседования. Некоторые хотят попасть в престижную компанию, чтобы повысить свой статус в обществе и в дальнейшем начать свое дело. Чтобы не терять впустую годы жизни, а сразу начать эффективную карьеру, используя имеющиеся знания, можно купить диплом в онлайне. Вы сможете быть полезным в обществе, обретете финансовую стабильность максимально быстро и просто- купить диплом о среднем образовании

  26. Cletusiders表示:

    Us Mex Pharm: UsMex Pharm – usa mexico pharmacy

  27. 1win_lwma表示:

    1win официальный сайт https://1win7011.ru .

  28. Sazrjhj表示:

    Заказать диплом о высшем образовании!
    Купить диплом института по выгодной стоимости возможно, обращаясь к проверенной специализированной фирме. Приобрести диплом о высшем образовании: diplomers.com/nadezhnij-diplom-o-visshem-obrazovanii-otzivi-i-doverie-2

  29. SteveViand表示:

    https://usmexpharm.shop/# UsMex Pharm

發佈回覆給「Cletusiders」的留言 取消回覆

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