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. Manrjru表示:

    Привет!
    Приобрести документ о получении высшего образования
    ast-diplomas24.ru/kupit-diplom-sankt-peterburg

  2. Lariorbok表示:

    Вопросы и ответы: можно ли быстро купить диплом старого образца?
    diplomasx.com/kupit-diplom-ekaterinbur

  3. iptv表示:

    This is the right webpage for everyone who hopes to understand this topic. You realize so much its almost tough to argue with you (not that I actually would want to…HaHa). You definitely put a brand new spin on a subject that has been written about for a long time. Excellent stuff, just great.

  4. Hey just wanted to give you a quick heads up. The words in your content seem to be running off the screen in Opera. I’m not sure if this is a format issue or something to do with internet browser compatibility but I thought I’d post to let you know. The layout look great though! Hope you get the issue resolved soon. Thanks

  5. Uazrupv表示:

    Здравствуйте!
    Где купить диплом специалиста?
    postgresconf.org/users/jerome-farmer

  6. Danrqfa表示:

    Привет, друзья!
    Мы предлагаем дипломы любой профессии.
    alexeysavrasov.ru/?item=63cb691f-f209-4336-a198-341a7dd6fe3d&termin=80a257a2-fe29-4c0b-bce2-5762ad5db806
    Рады оказаться полезными!.

  7. Diplomi_wtEa表示:

    купить диплом мед купить диплом мед .

  8. Sazrxvv表示:

    Добрый день!
    Как купить аттестат 11 класса с официальным упрощенным обучением в Москве
    autogroupe.ru/kupite-diplom-i-otkroyte-novyie-gorizontyi
    Рады помочь!

  9. Trefqol表示:

    Привет!
    Купить диплом о среднем образовании в Москве и любом другом городе
    forum.storeland.ru/index.php?/user/35880-dilopluyy/
    Будем рады вам помочь!.

  10. Dnrthtm表示:

    Добрый день!
    Приобрести документ института можно у нас в Москве.
    diploms-x24.ru/kupit-diplom-moskva
    Успешной учебы!

  11. Eanrzxr表示:

    Привет, друзья!
    Мы можем предложить дипломы любых профессий по приятным ценам.
    prasadha-dipantyasa.co.id/купить-диплом-москва-кого/

  12. Diplomi_mrEa表示:

    Привет!
    Заказать документ института можно у нас в Москве.
    ast-diplomy.com/kupit-diplom-kandidata-nauk 

  13. sex表示:

    I truly love your site.. Pleasant colors & theme. Did you create this amazing site yourself? Please reply back as I’m planning to create my very own site and want to learn where you got this from or what the theme is named. Thanks!

  14. Lazrviy表示:

    Привет!
    Мы предлагаем дипломы любой профессии по выгодным ценам.
    iladuanas.com/аттестат-11-классов-2014-2024-видео/

  15. Lazryav表示:

    Привет, друзья!
    Где купить диплом по актуальной специальности?
    Приобрести диплом о высшем образовании.
    k96586v0.beget.tech/component/comprofiler/pluginclass/cbblogs.html?action=blogs&func=show&id=140

  16. Flum vape表示:

    A fascinating discussion is worth comment. There’s no doubt that that you should write more on this issue, it might not be a taboo matter but typically people do not speak about such subjects. To the next! All the best!

  17. Uazrdfg表示:

    Привет!
    Купить диплом университета.
    animalprotect.org/forum/index.php?topic=234933.0

  18. Sazrgvh表示:

    Привет, друзья!
    Официальная покупка школьного аттестата с упрощенным обучением в Москве
    plut-uchukov.flybb.ru/viewtopic.php?f=1&t=498&sid=dc982212e940a8d352a34ed17ccb8bf9
    Всегда вам поможем!

  19. WilliamDeeli表示:

    Привет!
    Мы предлагаем выгодно и быстро купить диплом, который выполнен на оригинальном бланке и заверен мокрыми печатями, штампами, подписями официальных лиц. Данный диплом пройдет лубую проверку, даже при помощи специальных приборов. Решите свои задачи быстро и просто с нашим сервисом.
    http://www.ntsr.info/forum/user/95251/
    Хорошей учебы!

  20. Mazrrol表示:

    Привет!
    Заказать документ о получении высшего образования можно в нашей компании. Мы предлагаем документы об окончании любых ВУЗов Российской Федерации. Вы сможете получить необходимый диплом по любым специальностям, любого года выпуска, в том числе документы Советского Союза. Даем 100% гарантию, что при проверке документа работодателем, никаких подозрений не возникнет.
    Мы готовы предложить дипломы любой профессии по приятным ценам. Стоимость может зависеть от выбранной специальности, года получения и ВУЗа. Стараемся поддерживать для клиентов адекватную ценовую политику. Для нас очень важно, чтобы дипломы были доступными для большинства граждан.
    military-lip-b05.notion.site/f82a27b820314e24b42a5ea7bdd28c59/
    Всегда вам поможем!

  21. Razriqm表示:

    Здравствуйте!
    Наш сервис предлагает купить диплом в высочайшем качестве, неотличимый от оригинала без участия специалиста высокой квалификации со специальным оборудованием.
    msk-service.spb.ru/index.php?subaction=userinfo&user=iwuzyzyv
    Хорошей учебы!

  22. Manrhcc表示:

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

  23. cost表示:

    I blog often and I genuinely thank you for your information. The article has truly peaked my interest. I am going to bookmark your website and keep checking for new information about once a week. I opted in for your Feed as well.

  24. Mazrcvf表示:

    Привет!
    Аттестат школы купить официально с упрощенным обучением в Москве
    facefam.com/read-blog/331_na-chto-imenno-vnimanie-obratit-pri-zakaze-diploma-v-seti.html?mode=night

  25. porn表示:

    Greetings! Very useful advice in this particular article! It’s the little changes that will make the greatest changes. Thanks a lot for sharing!

  26. Your insights have given me a new perspective.Google Genius

  27. Cazrdcn表示:

    Привет!
    Мы готовы предложить документы техникумов, которые расположены в любом регионе России. Можно приобрести качественно сделанный диплом от любого заведения, за любой год, указав подходящую специальность и хорошие оценки за все дисциплины. Дипломы и аттестаты делаются на “правильной” бумаге высшего качества. Это дает возможность делать настоящие дипломы, которые не отличить от оригинала. Они заверяются всеми обязательными печатями и штампами.
    share.psiterror.ru/2024/07/09/zakazyvaem-dokumenty-v-proverennom-onlayn-magazine-po-vygodnoy-cene.html

  28. Qazrpga表示:

    Привет!
    Официальная покупка диплома ВУЗа с упрощенной программой обучения.
    Заказать диплом любого ВУЗа.
    testsajtet.net/read-blog/218

  29. Yrefwcs表示:

    Привет, друзья!
    Купить диплом о высшем образовании.
    russianecuador.com/forum/member.php?u=13207
    Успешной учебы!

發佈留言

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