HTML5 Canvas標籤範例
隨著時代的進步，HTML的版本一直在進化，目前比較新的版本應該就是HTML5了，這次的HTML5針對許多標籤進行調整，當然也新增了一些標籤，主要的目的是希望可以將一些本來需要利用Flash才可以完成的互動頁面取而用HTML5來進行設計，這樣比較能減輕網頁的負載，但不管怎麼進步，其最重要的目的當然還是要網友能夠看到才行！
目前各家的瀏覽器對於HTML5的支援都不一，如果想要測試看看自己所使用的瀏覽器對HTML5的支援程度，可以到這個網址測試，馬老師針對目前的三款瀏覽器（IE9、Firefox6、Chrome13）來做了測試，IE9於HTML5中測試得到了以下的分數：
Firefox6於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>
over the internet,Inside moon of affection medication males prudent person has learned two of by far the most prone on the time for them to start, which is this most liked time of your sweetheart remorse, as well as his optimum free time to be with her.
I the efforts you have put in this, appreciate it for all the great posts .
actually, Fidel Castro is not at all a bad man. Cuba has one of the best government medical care in the world;;
Thought target, penalize, status, respect, fortitude and even security. These types of some of the ideas that Tang Soo Commence, Vietnamese style with regards to self defense purposes, can tutor individuals along with instilling in your soul the flexibility not just to shield your self however , the key skill set towards how to spot real danger warnings in order tto avoid potential fight all in all.
Aw, this became an extremely nice post. In concept I have to devote writing like that additionally – taking time and actual effort to generate a great article… but so what can I say… I procrastinate alot through no indicates often go completed.
I saw a lot of website but I conceive this one has something extra in it.
Hey there! I just wanted to ask if you ever have any problems with hackers? My last blog (wordpress) was hacked and I ended up losing many months of hard work due to no data backup. Do you have any methods to stop hackers?
some cheap softwares does not offer good online technical support so i would caution about using them,
There are a few fascinating points soon enough in the following paragraphs but I do not determine if they all center to heart. There is certainly some validity but I am going to take hold opinion until I take a look at it further. Excellent write-up , thanks and that we want a lot more! Combined with FeedBurner likewise
thaibaccarat dot com is the best website to study casino games : like baccarat, poker, blackjack and roulette casino
There is noticeably a lot to know about this. I believe you made some nice points in features also.
you can always tell the quality of USB cables by looking at the thickness of the cable. thicker usb cables have higher quality;;
buy aciphex generic – order reglan 20mg buy motilium for sale
Have you already setup a fan page on Facebook ?~-.:.
It is in point of fact a great and useful piece of information. I’m happy that you shared this helpful information with us. Please stay us informed like this. Thanks for sharing.
Attractive element of content. I just stumbled upon your weblog and in accession capital to say that I get in fact enjoyed account your blog posts. Anyway I will be subscribing on your augment or even I fulfillment you access persistently rapidly.
Hello! I want to provide a enormous thumbs up for that wonderful info you could have here within this post. We are returning to your website to get more soon.
I?¦m now not sure where you are getting your information, however great topic. I needs to spend some time finding out more or understanding more. Thanks for great information I used to be looking for this info for my mission.
Wonderful article! I wish I had your insight on this topic and could write as well as you. I hope many people get the opportunity to enjoy this great content.
Wonderful article, thank you for sharing the info. It isn’t too often that you simply read articles where the poster understands what they’re blogging about. Grammar as well as punctuational are spot on too, only trouble I seemed to have had been bringing up the site, appeared sluggish. Looks like other visitors experienced the same trouble?
I love the valuable info you supply in your posts. Do you still feel this way?
Folks today really needs to be even more a lot more certified to celebrate the benefits of your problems, to implement present day methods for contraceptive, to store all of our all-natural solutions additionally recycle for money all of our products and solutions and answers. We’re also guaranteed we’ll have obtained a enhanced in addition tidier web-site when you want it.
I think other website proprietors should take this website as an model, very clean and fantastic user genial style and design, as well as the content. You are an expert in this topic!
I believe that avoiding prepared foods would be the first step for you to lose weight. They will often taste good, but highly processed foods have got very little nutritional value, making you take more to have enough strength to get with the day. When you are constantly eating these foods, moving over to cereals and other complex carbohydrates will let you have more strength while having less. Good blog post.
J’apprécie cette diapositive toutefois j’en ai auparavant vu de semblable de meilleures qualité supérieure
oh well, online promotion also takes a lot of work just like offline promotion of products and services*
pharmacie en ligne france fiable: pharmacie en ligne france fiable – pharmacie en ligne livraison europe
pharmacie en ligne livraison europe: kamagra livraison 24h – Pharmacie Internationale en ligne
acheter mГ©dicament en ligne sans ordonnance: kamagra en ligne – trouver un mГ©dicament en pharmacie
pharmacie en ligne fiable: kamagra oral jelly – pharmacie en ligne france livraison belgique