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,923 Responses

  1. Xazrssj表示:

    Добрый день!
    Узнайте, как приобрести диплом о высшем образовании без рисков
    landik-diploms-srednee.ru/diplom-s-reestromkupit-kupit В 

  2. Wsmryw表示:

    order lasuna generic – buy lasuna pill how to buy himcolin

  3. Dnrtmiw表示:

    Здравствуйте!
    Заказать документ о получении высшего образования вы имеете возможность в нашей компании.
    ast-diplomas.com/kupit-diplom-sankt-peterburg
    Хорошей учебы!

  4. Diplomi_kfkl表示:

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

  5. Diplomi_sokl表示:

    купить диплом в коврове http://www.diploms-x.com .

  6. Trefpkm表示:

    Привет, друзья!
    Официальная покупка диплома вуза с упрощенной программой обучения
    mockwacom.getbb.ru/viewtopic.php?f=11&t=1728
    Рады помочь!.

  7. Diplomi_ujPa表示:

    за сколько можно купить диплом высшем образовании diplomasx.com .

  8. Diplomi_kjei表示:

    документы фейк ast-diploms.com .

  9. Kissimmee表示:

    A fascinating discussion is worth comment. I think that you should publish more on this topic, it may not be a taboo subject but typically people do not discuss such issues. To the next! Cheers.

  10. Thanks for taking the time to write this.seo 최적화

  11. Lariorpod表示:

    Легальная покупка школьного аттестата с упрощенной программой обучения
    ast-diploms.com/kupit-diplom-ekaterinbur

  12. Cazrfjk表示:

    Привет, друзья!
    Мы предлагаем документы ВУЗов, которые находятся в любом регионе Российской Федерации. Можно приобрести диплом от любого учебного заведения, за любой год, включая сюда документы СССР. Дипломы и аттестаты выпускаются на “правильной” бумаге самого высокого качества. Это дает возможность делать настоящие дипломы, которые невозможно отличить от оригиналов. Документы будут заверены всеми необходимыми печатями и подписями.
    jiamv4mrr.blogdiloz.com/27776776/%D0%A0%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%BD%D0%BE%D0%B5-%D0%BE%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BF%D1%80%D0%B8%D0%BE%D0%B1%D1%80%D0%B5%D1%82%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B4%D0%B8%D0%BF%D0%BB%D0%BE%D0%BC%D0%B0-%D0%B2-%D0%B7%D0%BD%D0%B0%D0%BC%D0%B5%D0%BD%D0%B8%D1%82%D0%BE%D0%BC-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%B5

  13. Dnrtibh表示:

    Здравствуйте!
    Заказать документ ВУЗа можно у нас.
    diplomasx.com/kupit-diplom-moskva
    Хорошей учебы!

  14. Lazrihz表示:

    Привет!
    Где заказать диплом специалиста?
    Купить диплом о высшем образовании.
    cbr.by/club/user/1977/blog/316/

  15. Xazrtwn表示:

    Привет, друзья!
    Купить диплом о высшем образовании
    landik-diploms-srednee.ru/attestat-shkoly В 
    Успехов в учебе!

  16. Dnrtrov表示:

    Привет, друзья!
    Приобрести документ о получении высшего образования вы сможете в нашем сервисе.
    ast-diplom.com/kupit-diplom-nizhnij-novgorod
    Хорошей учебы!

  17. Lazrlqd表示:

    Привет, друзья!
    Где купить диплом по актуальной специальности?
    Купить диплом университета.
    http://www.cyclopede.com/cb-profile/pluginclass/cbblogs?action=blogs&func=show&id=270

  18. hishypesports表示:

    Right here is the right web site for everyone who wishes to find out about this topic. You understand so much its almost tough to argue with you (not that I actually would want to…HaHa). You definitely put a new spin on a subject which has been written about for decades. Wonderful stuff, just great.

  19. Uazrpfh表示:

    Привет, друзья!
    Где приобрести диплом по нужной специальности?
    ilovehabbo.bbon.ru/viewtopic.php?id=1557#p28973
    Успешной учебы!

  20. Uazrbdq表示:

    Здравствуйте!
    Купить диплом о высшем образовании.
    brand-the-change.mn.co/posts/61724342

  21. Manreia表示:

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

  22. WilliamDeeli表示:

    Здравствуйте!
    Наши специалисты предлагают выгодно купить диплом, который выполнен на оригинальном бланке и заверен печатями, водяными знаками, подписями. Наш диплом пройдет любые проверки, даже при помощи специального оборудования. Достигайте свои цели максимально быстро с нашими дипломами.
    torrent-repack.club/index.php?subaction=userinfo&user=avypu
    Успешной учебы!

  23. Razryry表示:

    Добрый день!
    Мы предлагаем купить диплом в высоком качестве, неотличимый от оригинала без участия специалиста высокой квалификации со сложным оборудованием.
    misstres.ru/forum/profile.php?action=show&member=7126
    Успешной учебы!

  24. Qazrlfy表示:

    Привет!
    Как оказалось, купить диплом кандидата наук не так уж и сложно.
    Заказать диплом о высшем образовании.
    innovativeimo.org/read-blog/787

  25. Yrefehy表示:

    Добрый день!
    Купить диплом о высшем образовании.
    stalinarch.ru/wiki/index.php/??????_??_?????:_????_?????_?_?????_????????????_?_????????????!
    Удачи!

  26. Trefisr表示:

    Здравствуйте!
    Как быстро получить диплом магистра? Легальные способы
    http://www.imdb.com/list/ls547814563/?ref_=lsedt_ov
    Рады оказаться полезными!.

  27. Tazrsuo表示:

    Привет, друзья!
    Приобрести диплом о высшем образовании
    Мы предлагаем документы техникумов, которые расположены на территории всей Российской Федерации. Можно заказать диплом за любой год, указав необходимую специальность и хорошие оценки за все дисциплины. Документы печатаются на бумаге самого высокого качества. Это позволяет делать настоящие дипломы, не отличимые от оригинала. Они заверяются необходимыми печатями и штампами.
    buro-alfa.ru/alfa/2022/04/22/zachem-neobhodimo-poluchenie-diploma-onlayn.html
    Рады помочь!.

  28. Sazrbhb表示:

    Привет, друзья!
    Узнайте стоимость диплома высшего и среднего образования и процесс получения
    buldingnews.ru/byistroe-oformlenie-diploma-nadezhno-i-konfidentsialno
    Рады оказаться полезными!.

發佈留言

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