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

  1. Trenterone表示:

    purple pharmacy mexico price list: Agb Mexico Pharm – Agb Mexico Pharm

  2. ChesterFus表示:

    canadian pharmacy review: northern pharmacy canada – canada rx pharmacy

  3. Dnrtmqa表示:

    Где приобрести диплом специалиста?
    Мы изготавливаем дипломы любой профессии по приятным тарифам. Мы предлагаем документы техникумов, расположенных в любом регионе РФ. Можно купить качественно сделанный диплом от любого учебного заведения, за любой год, указав актуальную специальность и оценки за все дисциплины. Документы выпускаются на “правильной” бумаге самого высшего качества. Это позволяет делать государственные дипломы, которые не отличить от оригиналов. Документы будут заверены необходимыми печатями и штампами. Стараемся поддерживать для покупателей адекватную политику цен. Для нас важно, чтобы дипломы были доступными для большого количества наших граждан. bisness-diplom.ru/kupit-diplom-buxgaltera-2-4

  4. EdwinWency表示:

    india pharmacy: www india pharm – www india pharm

  5. RobertPaync表示:

    canadian pharmacy 1 internet online drugstore go canada pharm canadian pharmacies compare

  6. Cazrvnb表示:

    Добрый день!
    Мы изготавливаем дипломы психологов, юристов, экономистов и прочих профессий по приятным ценам. Цена зависит от выбранной специальности, года выпуска и ВУЗа: diplomanruss.com/

  7. RobertPaync表示:

    canadian mail order pharmacy GoCanadaPharm best canadian pharmacy

  8. Trenterone表示:

    Agb Mexico Pharm: Agb Mexico Pharm – mexico drug stores pharmacies

  9. MatthewTek表示:

    https://gocanadapharm.com/# reliable canadian pharmacy reviews

  10. Cazrlni表示:

    Здравствуйте!
    Без университета очень сложно было продвинуться по карьере. Сегодня же этот важный документ не дает абсолютно никаких гарантий, что удастся найти престижную работу. Более важны профессиональные навыки и знания специалиста, а также его опыт. В связи с этим решение о покупке диплома следует считать мудрым и рациональным. Заказать диплом любого ВУЗа 1worldonline.copiny.com/question/details/id/1052680

  11. Trenterone表示:

    reputable canadian online pharmacies: go canada pharm – canadian pharmacy drugs online

  12. ChesterFus表示:

    Agb Mexico Pharm: Agb Mexico Pharm – mexican pharmaceuticals online

  13. id god表示:

    I like what you guys tend to be up too. This type of clever work and reporting! Keep up the superb works guys I’ve included you guys to our blogroll.|

  14. аренда шатров для мероприятий москва цены аренда шатров для мероприятий москва цены .

  15. ChesterFus表示:

    Agb Mexico Pharm: Agb Mexico Pharm – Agb Mexico Pharm

  16. Uazrjud表示:

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

  17. EdwinWency表示:

    canadian online pharmacy reviews: GoCanadaPharm – canadian pharmacy ltd

  18. RobertPaync表示:

    online pharmacy india www india pharm www india pharm

  19. EdwinWency表示:

    Agb Mexico Pharm: Agb Mexico Pharm – medication from mexico pharmacy

  20. id god表示:

    At this moment I am going away to do my breakfast, later than having my breakfast coming again to read other news.|

  21. Trenterone表示:

    legit canadian pharmacy: GoCanadaPharm – cross border pharmacy canada

  22. ChesterFus表示:

    Agb Mexico Pharm: medication from mexico pharmacy – Agb Mexico Pharm

  23. MatthewTek表示:

    https://wwwindiapharm.com/# www india pharm

  24. тентовые конструкции шатры в аренду https://shatry-dlya-meropriyatiy.ru .

  25. MatthewTek表示:

    http://gocanadapharm.com/# canadian pharmacy reviews

  26. Trenterone表示:

    www india pharm: www india pharm – indian pharmacy online

  27. EdwinWency表示:

    Agb Mexico Pharm: Agb Mexico Pharm – Agb Mexico Pharm

  28. ChesterFus表示:

    Agb Mexico Pharm: п»їbest mexican online pharmacies – Agb Mexico Pharm

  29. Diplomi_usSa表示:

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

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

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