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>
You can certainly see your skills in the work you write. The world hopes for even more passionate writers such as you who are not afraid to say how they believe. Always go after your heart.
gain expertise, would you mind updating your weblog with a great deal more details? It’s very beneficial for me.
This is very interesting, You’re a very skilled blogger. I have joined your feed and look forward to seeking more of your fantastic post. Also, I have shared your web site in my social networks!
Credit for the great blog post. I am glad I have taken the time to read this.
оборудование для актовых залов оборудование для актовых залов .
Exactly what I was searching for, regards for posting .
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.
Thank you for an additional crucial report. Where else could everyone get that form of information in this kind of a total way of writing? I’ve a presentation incoming week, and I am on the lookout for these info.
I genuinely prize your piece of work, Great post.
Can I just say what a reduction to search out somebody who really is aware of what theyre speaking about on the internet. You undoubtedly know how one can carry an issue to light and make it important. Extra people must read this and perceive this aspect of the story. I cant imagine youre not more popular because you definitely have the gift.
Perfect story! Thought about loved the very learning. I’m hoping to read simple things a great deal more from your website. You will find you might have good information and also thought. Now i’m absolutely satisfied utilizing this critical information.
Wow, wonderful blog layout! How lengthy have you ever been running a blog for? you make running a blog glance easy. The total look of your web site is magnificent, well the content material!
I am thankful that I detected this site, just the right info that I was looking for!
Howdy! I know this is kinda off topic nevertheless I’d figured I’d ask. Would you be interested in trading links or maybe guest authoring a blog article or vice-versa? My website covers a lot of the same topics as yours and I feel we could greatly benefit from each other. If you happen to be interested feel free to shoot me an e-mail. I look forward to hearing from you! Great blog by the way!
Great post, I conceive website owners should larn a lot from this blog its rattling user pleasant.
when i was a kid, i really enjoyed going up and down on water slides, it is a very enjoyable experience.
Hi my own cherished one! I wish to state that this kind of post is awesome, good composed and include virtually all important infos. I?|d want to seem added content such as this .
home repair can be difficult specially if you do not have any idea at all about what you are doing,,
I do know this isn’t precisely on subject, however i’ve a site using the identical program as properly and i get troubles with my feedback displaying. is there a setting i am missing? it’s doable chances are you’ll assist me out? thanx.
hydrea pills – ethionamide over the counter methocarbamol 500mg sale
Super news it is definitely. My girlfriend has been awaiting for this update.
This is the type of information I’ve long been trying to find. Thank you for writing this information.
Likely to commence a business venture around the refers to disclosing your products and so programs not just to individuals near you, remember, though , to several potential prospects more via the www often. earn money
Yay google is my king assisted me to find this outstanding site! .
the best addition on our garden that we have are those garden swings, the garden swings made our kids very very happy;
I was really lucky to find this internet site on bing, just what I was searching for : D likewise saved to favorites .
Well, I am so excited that I have found your post because I have been searching for some info on this for almost three hours! You’ve helped me a lot indeed and by reading this story I have found many new and useful info about this subject!
Good thinking. Im curious to think what type of impact this would have globally? Sometimes people get a little upset with global expansion. Ill check back to see what you have to say.
I am frequently to blogging we genuinely appreciate your content regularly. Your content has really peaks my interest. I am about to bookmark your internet site and keep checking choosing data.
Have you ever considered publishing an e-book or guest authoring on other sites? I have a blog based upon on the same subjects you discuss and would really like to have you share some stories/information. I know my readers would value your work. If you are even remotely interested, feel free to shoot me an email.