馬老師 雲端研究室

Passion inspires professional

馬老師 雲端研究室

HTML5 Canvas標籤範例

by · 2011-09-01

隨著時代的進步，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>

Tags:

You may also like...

19,840 Responses

  1. Tammiepisn表示:
    2022-09-2819:08:45

    fast custom essays
    write my essay for money
    write my history essay for me

    回覆
  2. Tammiepisn表示:
    2022-09-2814:23:41

    law essay help
    best essay writing service review
    need someone to write my essay

    回覆
  3. Tammiepisn表示:
    2022-09-2800:49:27

    cheap essay online
    how to write my essay
    custom essay writing company

    回覆
  4. Pennypisn表示:
    2022-09-2723:17:54

    college essay help online
    essays writing help
    cheap essay writing service

    回覆
  5. Pennypisn表示:
    2022-09-2718:28:11

    service essay
    essay writer cheap
    what is a good essay writing service

    回覆
  6. Pennypisn表示:
    2022-09-2705:38:26

    academic essay help
    helping others essays
    write my essay reviews

    回覆
  7. Chelsaepisn表示:
    2022-09-2704:09:18

    argumentative essay helper
    best custom essay writing services
    which essay writing service is the best

    回覆
  8. Chelsaepisn表示:
    2022-09-2623:08:16

    best custom essay service
    cheap custom essay writing services
    essay conclusion help

    回覆
  9. vacate cleaning service表示:
    2022-09-2610:57:39

    I truly appreciate this post. I have been looking everywhere for this! Thank goodness I found it on Bing. You have made my day! Thank you again

    回覆
  10. Chelsaepisn表示:
    2022-09-2609:57:03

    what is the best online essay writing service
    essay writing service forum
    mba application essay writing service

    回覆
  11. Nanicepisn表示:
    2022-09-2608:29:43

    graduate school essay writing service
    buy an essay online cheap
    buy cheap essays online

    回覆
  12. Nanicepisn表示:
    2022-09-2603:58:48

    essay writing service reviews
    essays writing services
    need help writing essay

    回覆
  13. 야동조타表示:
    2022-09-2603:10:13

    fantastic post, very informative. I wonder why more of the ther experts in the field do not break it down like this. You should continue your writing. I am confident, you have a great readers’ base already!

    回覆
  14. Nanicepisn表示:
    2022-09-2515:00:30

    professional college application essay writers
    using essay writing service
    help writing essays for college

    回覆
  15. Charitapisn表示:
    2022-09-2513:31:12

    please write my essay
    college essay writers block
    who can help me write an essay

    回覆
  16. Charitapisn表示:
    2022-09-2508:40:13

    discount essay writing service
    best college essay help
    order essay online cheap

    回覆
  17. Charitapisn表示:
    2022-09-2419:16:08

    need help with essay
    customized essay
    psychology essay writing services

    回覆
  18. Charitapisn表示:
    2022-09-2415:01:49

    affordable essay writing service
    legitimate essay writing services
    essay help sites

    回覆
  19. Charitapisn表示:
    2022-09-2401:29:44

    help write essay
    essay writing service legal
    help with writing an essay

    回覆
  20. Ashlenpisn表示:
    2022-09-2323:54:10

    buy an essay online cheap
    buy cheap essay
    cheap essay service

    回覆
  21. Ashlenpisn表示:
    2022-09-2318:54:21

    college essay editing services
    college essay writing service
    essay writers online cheap

    回覆
  22. Ashlenpisn表示:
    2022-09-2305:45:31

    custom college essay
    cheap essay writing service
    essay help

    回覆
  23. Merolapisn表示:
    2022-09-2304:08:02

    custom essays cheap
    custom order essays
    who can write my essay

    回覆
  24. Herramientas para PC表示:
    2022-09-2302:56:46

    I like what you have to offer. Keep up the good work!

    回覆
  25. Merolapisn表示:
    2022-09-2223:04:31

    help with college essays
    college admissions essay help
    essay 123 help

    回覆
  26. The Northman 2022 Online Putlocker表示:
    2022-09-2218:22:47

    Thanks for your patience and sorry for the inconvenience!

    回覆
  27. Qu'est ce qu'on a tous fait au Bon Dieu Streaming表示:
    2022-09-2217:11:37

    I would really like to appreciate the endeavors you cash in on written this article. I’m going for the similar best product from you finding out in the foreseeable future as well. Actually your creative writing abilities has urged me to begin my very own blog now. Genuinely the blogging is distributing its wings rapidly. Your write down is often a fine illustration showing it.

    回覆
  28. House of the Dragon Full Show Online 2022表示:
    2022-09-2216:27:55

    I just added this to my favorites. I truly love reading your posts. Tyvm!

    回覆
  29. Merolapisn表示:
    2022-09-2209:40:42

    essay writing services online
    buy essay online
    essay services reviews

    回覆
  30. Martypisn表示:
    2022-09-2208:10:24

    scholarship essay writing help
    essay service
    essay title help

    回覆

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

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