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>
Aw, i thought this was a very good post. In notion I would like to put in writing like that additionally – taking time and actual effort to manufacture a excellent article… but what / things I say… I procrastinate alot and no indicates apparently get something accomplished.
This would be the appropriate weblog for everyone who is wants to check out this topic. You know a lot its virtually hard to argue along (not that I really would want…HaHa). You actually put a fresh spin using a topic thats been discussed for years. Excellent stuff, just fantastic!
I not to mention my friends were actually examining the good tips and tricks on your web site then before long I had a horrible suspicion I had not thanked you for those strategies. All of the young boys appeared to be for that reason very interested to study all of them and have in actuality been loving these things. I appreciate you for truly being simply considerate and also for pick out some impressive information millions of individuals are really eager to discover. Our sincere apologies for not expressing appreciation to you earlier.
Well done! I thank you your contribution to this matter. It has been useful. my blog: cityville cheats
But a smiling visitor here to share the love (:, btw great pattern .
A remarkable discussion merits a comment. I feel that you need to write much more about this subject, it may well not be regarded as a taboo issue however normally people are inadequate to speak on such topics. To another. Adios for now
it sometimes difficult to select the right kind of mens clothing but there are helpful buying guides on the internet*
I wanted to send a word to say thanks to you for those nice tips you are sharing at this site. My considerable internet look up has finally been recognized with brilliant content to share with my friends. I ‘d believe that many of us website visitors actually are undoubtedly blessed to be in a very good website with so many lovely professionals with interesting techniques. I feel pretty blessed to have encountered your entire webpages and look forward to tons of more enjoyable minutes reading here. Thanks again for everything.
The next occasion Someone said a blog, Lets hope it doesnt disappoint me as much as this place. I am talking about, I know it was my method to read, but I actually thought youd have some thing fascinating to say. All I hear is actually a few whining about something that you could fix if you werent too busy interested in attention.
You need to be a part of a contest for starters of the finest blogs on the web. Let me suggest this page!
Nice post. I understand some thing very complicated on different blogs everyday. It will always be stimulating to learn content from other writers and exercise a little at their store. I’d prefer to apply certain using the content in my weblog regardless of whether you don’t mind. Natually I’ll provide link for your web blog. Many thanks sharing.
Thank you for the good writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! However, how can we communicate?
Hi there, simply become aware of your blog thru Google, and found that it is truly informative. I’m gonna be careful for brussels. I will be grateful should you continue this in future. Lots of other folks can be benefited out of your writing. Cheers!
R&B music is my favorite stuff, pop music is great too but R&B is the best’
Your blog is one of a kind, i love the way you organize the topics.”:*,,
Free online games… […]First off I want to say terrific blog! I had a quick question in which I’d like to ask if you don’t mind. I was curious to know how you center yourself and clear your thoughts prior to writing. I’ve had difficulty clearing my mind in getting my…
you have got a wonderful weblog here! do you want to make some invite posts in my small blog?
J’apprécie cette diapositive toutefois j’en ai auparavant vu de semblable de meilleures qualité supérieure
You made some decent points there. I appeared on the web for the issue and located most individuals will associate with with your website.
Wonderful post will be linking this on a few sites of mine keep up the good work.
You completed a few good points there. I did a search on the matter and found nearly all folks will go along with with your blog.
I have not checked in here for a while since I thought it was getting boring, but the last several posts are great quality so I guess I will add you back to my everyday bloglist. You deserve it my friend
lucky jet на деньги https://1win-luckyjet-ru.ru .
лаки джет играть 1win-luckyjet-ru.ru .
I just couldn’t depart your site before suggesting that I actually enjoyed the standard info a person provide for your visitors? Is gonna be back often to check up on new posts
i appreciate you for blogging!. “Education is a method whereby one acquires a higher grade of prejudices.” by Laurence J. Peter..
Incredible this help is definitely outstanding it truly helped me plus our kids, appreciate it!
I think other site proprietors should take this site as an model, very clean and magnificent user genial style and design, let alone the content. You’re an expert in this topic!
dulcolax 5 mg pill – bisacodyl 5mg pills liv52 10mg generic
I like this post, enjoyed this one thanks for posting .