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>
Hey, I just hopped over to your site via StumbleUpon. Not somthing I would normally read, but I liked your thoughts none the less. Thanks for making something worth reading.
I would point out that we website visitors actually are unequivocally lucky to exist in a useful website with so many wonderful people with very helpful concepts.
I get similar messages from my comment form. I usually wait a few days. If I get the same exact message, I delete both. If not, I might check out what they have to offer.
buy fulvicin pills – purchase gemfibrozil for sale gemfibrozil for sale
Hello there, I discovered your blog via Google while looking for a related subject, your web site got here up, it seems good. I have bookmarked it in my google bookmarks.
excellent post, very informative. I wonder why the other specialists of this sector don’t notice this. You should continue your writing. I am sure, you have a huge readers’ base already!
closings are dead-on and i will forthwith subscribe for your rss nourish to stay as much date with your up approaching postings. Sure! I confess it, your
There is noticeably a lot of money to understand about this. I suppose you’ve made certain nice points in functions also.
I’ll right away seize your rss feed as I can not to find your e-mail subscription link or e-newsletter service. Do you have any? Please permit me recognize so that I may just subscribe. Thanks!
There are a handful of fascinating points on time on this page but I don’t know if I see these people center to heart. There may be some validity but I’m going to take hold opinion until I take a look at it further. Excellent article , thanks and then we want a lot more! Included in FeedBurner too
My brother recommended I might like this blog. He was entirely right. This post actually made my day. You can not imagine just how much time I had spent for this info! Thanks!
both silver jewelry and gold jewelry are good as body adornments, gold is of course the best and silver is second,
Trop excitant de mater des femmes lesbiennes en train de se doigter la chatte pour se faire jouir. En plus sur cette bonne petite vid o porno hard de lesb X les deux jeunes lesbienne sont trop excitantes et super sexy. Des pures beaut de la nature avec des courbes parfaites, les filles c est quand v
Thanks for the tips you have provided here. One more thing I would like to mention is that laptop memory requirements generally increase along with other breakthroughs in the engineering. For instance, as soon as new generations of processors are introduced to the market, there is usually a matching increase in the shape demands of all computer system memory plus hard drive room. This is because the application operated by these cpus will inevitably boost in power to leverage the new engineering.
Hi there, have you ever previously asked yourself to create about Nintendo DSi?
I’m new to your blog and i really appreciate the nice posts and great layout.`’`-`
Awesome material you fellas got these. I actually like the theme for the website along with how you organized a person who. It’s a marvelous job For certain i will come back and check out you out sometime.
This is certainly my initial stop by and I really like what I’m seeing. Your weblog is so much fun to look over, quite compelling as well as informative.
we have different sectional sofas at home, i find them very comfortable and easy to setup’
Aw, this was a really nice post. Spending some time and actual effort to create a great article… but what can I say… I put things off a whole lot and don’t seem to get nearly anything done.
cotrimoxazole 960mg oral – levetiracetam 500mg generic buy tobra generic
eukroma online – dydrogesterone 10 mg uk duphaston 10mg sale
Comfortably, the blog post is during truthfulness a hottest on this subject well known subject matter. I agree with ones conclusions and often will desperately look ahead to your updaters. Saying thanks a lot will not just be sufficient, for ones wonderful ability in your producing. I will immediately grab ones own feed to stay knowledgeable from any sort of update versions. Amazing get the done and much success with yourbusiness results!
This is really serious, You’re an exceptionally seasoned writer. I have signed up with your feed plus count on enjoying your personal tremendous write-ups. On top of that, I’ve got shared your web blog in our social networking sites.
there are many different book genres online but i would really love to read about self help books,.
I do not even know the way I stopped up right here, but I thought this publish used to be good. I do not recognize who you might be however certainly you’re going to a well-known blogger when you are not already Cheers!
I am curious to find out what blog system you are utilizing? I’m experiencing some minor security problems with my latest website and I would like to find something more safeguarded. Do you have any recommendations?
What fun activity relating to female firefighters can I make my class do?
Howdy! Do you know if they make any plugins to assist with Search Engine Optimization? I’m trying to get my website to rank for some targeted
keywords but I’m not seeing very good success. If you know of any please share.
Appreciate it! I saw similar article here: Escape rooms list
Or perhaps considered adding more videos towards your blog posts to maintain readers more entertained? I mean Someone said all over the country actual yours but it was quite good but as I’m greater numbers of a visual learner,I found that to become more helpful well make me aware the way it seems.