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>
This web site really has all the info I wanted about this subject and didn’t know who to ask.
сериал смотреть
I’m officially a fan of The work. It’s like having a crush, but intellectually stimulating.
It is in reality a great and useful piece of information. I am happy that you just shared this useful information with us. Please keep us up to date like this. Thanks for sharing.
серия
Hey I’m reading this on my phone and it looks a bit different than on my computer have you noticed this or is it just my phone ? thanks Nice post btw
What would many of us do devoid of the brilliant suggestions you share on this web site? Who else has got the perseverance to cope with important topics in the interest of ordinary subscribers like me? My spouse and i and my guys are really lucky to have your website among the ones we typically visit. We hope you know how a great deal we take pleasure in your efforts! Much luck coming from us all.
Fantastic, are you looking for real estate in Winter Springs, FL? Learn where the deals are, getbank owned property lists and find condos for sale in Sanford.
I’d have got to talk to you here. Which isn’t something Which i do! I love reading an article that should make people believe. Also, many thanks allowing me to comment!
I’m impressed, I have to say. Actually hardly ever do I encounter a weblog that’s both educative and entertaining, and let me tell you, you’ve gotten hit the nail on the head. Your idea is outstanding; the problem is something that not sufficient individuals are speaking intelligently about. I am very comfortable that I stumbled throughout this in my search for something relating to this.
I visited a lot of website but I conceive this one holds something special in it in it
Saved your site. Appreciation for discussing. Surely well worth time clear of my personal tests.
Hi there! I know this is sort of off-topic but I had to ask. Does running a well-established blog such as yours take a lot of work? I am brand new to blogging however I do write in my diary on a daily basis. I’d like to start a blog so I can easily share my personal experience and views online. Please let me know if you have any kind of recommendations or tips for brand new aspiring bloggers. Appreciate it!
etodolac 600 mg drug – purchase pletal without prescription cilostazol brand
I got what you mean , saved to fav, very nice website .
Great post, you have pointed out some fantastic points , I likewise think this s a very wonderful website.
I like what you guys are up also. Such smart work and reporting! Keep up the excellent works guys I?ve incorporated you guys to my blogroll. I think it will improve the value of my site
very nice post, i undoubtedly love this excellent website, persist in it
This is really exciting, You’re an awfully skilled article writer. I have signed up with your feed additionally look forward to enjoying your personal fabulous write-ups. What’s more, We’ve shared your websites throughout our myspace.
I have been examinating out a few of your posts and it’s pretty nice stuff. I will surely bookmark your site
Greetings! This is my first visit to your blog! We are a team of volunteers and starting a new initiative in a community in the same niche. Your blog provided us useful information to work on. You have done a wonderful job!
I was suggested this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my trouble. You are wonderful! Thanks!Nice blog here! Also your web site loads up fast! What web host are you using? Can I get your affiliate link to your host? I wish my website loaded up as quickly as yours lol
if this post was likened to a flavor of yogurt, what flavor would it be? Banana, I think.
Chaga mushroom tea appears to be shown a great deal of mankind through Ruskies artice writer Alexandr Solzhenitsyn using your partner’s new ‘Cancer Ward’ the spot predominant reputation has been curable of pisces with the help of the help of this relaxer. Chaga
I’m impressed, I must say. Really rarely can i encounter a blog that’s both educative and entertaining, and let me tell you, you’ve got hit the nail for the head. Your notion is outstanding; the pain is something which there are not enough everyone is speaking intelligently about. We are very happy that we stumbled across this during my try to find some thing concerning this.
It is really a nice and helpful piece of information. I am satisfied that you shared this helpful tidbit with us. Please keep us up to date like this. Thank you for sharing.
The insights are like a favorite book; I find new treasures each time I return.
When I originally commented I clicked the -Notify me when new comments are added- checkbox now if a comment is added I get four emails concentrating on the same comment. Will there be any way you may remove me from that service? Thanks!
Hi” i think that you should add captcha to your blog.
Judging by the way you write, you seem like a professional writer.,-~~;