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>
купить диплом в набережных челнах vm-tver.ru .
перевозка вещей https://gruzchikiminsk.ru/ .
Hi my loved one! I want to say that this post is awesome, nice written and include almost all important infos. I would like to peer extra posts like this .
“I’m delighted I came across it. I’ll be back down the track to check out other posts”
You really make it seem really easy along with your presentation however I discover this matter to be really one thing that I believe I’d never understand. It seems too complicated and very broad for me. I am looking ahead on your next publish, I will try to get the grasp of it!
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.
Fantastic goods from you, man. I have understand your stuff previous to and you’re just too great. I actually like what you’ve acquired here, certainly like what you are saying and the way in which you say it. You make it enjoyable and you still care for to keep it wise. I cant wait to read far more from you. This is actually a wonderful website.
Hi there, have you ever before thought about to create regarding Nintendo Dsi handheld?
Marvelous post. I discover new things upon distinct weblogs everyday. Couple of stimulating to determine content material using their company writers and become familiar having a small something their own particular. I would think to use some within this content on my small blog need to don’t mind. Naturally I will provides a link support within web site. Thanks sharing.
I’m not sure exactly how I found this blog because I had been researching information on Real Estate inWinter Springs, FL, but anyway, I have had a pleasant time reading it, keep it up!
i love to collect different models of cellphones that is why i have lots of cellphones at home;;
Hiya, I am really glad I’ve found this information. Nowadays bloggers publish only about gossips and net and this is actually irritating. A good blog with interesting content, this is what I need. Thanks for keeping this website, I’ll be visiting it. Do you do newsletters? Cant find it.
Wow! This can be one particular of the most beneficial blogs We have ever arrive across on this subject. Basically Magnificent. I’m also a specialist in this topic so I can understand your effort.
I truly appreciate this post. I have been looking everywhere for this! Thank goodness I found it on Bing. You have made my day! Thx again!
I found your blog site on google and verify a few of your early posts. Continue to maintain up the very good operate. I simply further up your RSS feed to my MSN News Reader. Seeking ahead to reading extra from you later on!…
You have brought up a very wonderful points , regards for the post.
I envy your piece of work, thanks for all the useful blog posts.
*Aw, this was a really nice post. In idea I would like to put in writing like this additionally — taking time and actual effort to make a very good article… but what can I say… I procrastinate alot and by no means seem to get something done.
Do you now the different between a bad and a good post? I do now after reading yours. Most poeple post just to fill in there site but yours is good. Do you have a twitter account that i can follow?
Hi there. Very nice blog!! Guy .. Beautiful .. Wonderful .. I’ll bookmark your web site and take the feeds additionally…I am happy to locate a lot of useful info here within the post. Thanks for sharing…
Good aftie. i am a blogger too. and i can see that you are a nice blogger too”
You made various good points there. I did a search on the topic and found most people will have the same opinion with your blog.
In this awesome design of things you’ll secure a B+ for hard work. Exactly where you actually misplaced me ended up being on your specifics. You know, it is said, details make or break the argument.. And it couldn’t be more true at this point. Having said that, let me tell you precisely what did give good results. Your authoring is actually quite convincing and that is most likely why I am making the effort in order to opine. I do not make it a regular habit of doing that. Next, despite the fact that I can see the jumps in reasoning you come up with, I am not necessarily certain of just how you appear to unite your points which in turn make your conclusion. For the moment I will, no doubt subscribe to your issue but wish in the near future you connect your dots better.
I always visit new blog everyday and i found your blog.;`~”`
The next occasion Someone said a weblog, I’m hoping which it doesnt disappoint me approximately this. I mean, It was my solution to read, but I really thought youd have some thing interesting to talk about. All I hear is often a couple of whining about something that you could fix if you ever werent too busy trying to find attention.
Aw, it was an extremely good post. In concept I would like to invest writing this way moreover – spending time and actual effort to make a top notch article… but exactly what can I say… I procrastinate alot by no indicates find a way to get something accomplished.
it does not take too long to learn good piano playing if you have a good piano lesson*
Thats pretty cool! I look forward to reading more of your posts.
Thanks for your blog post and discussing your own results together with us. Very well completed! I think a lot of people find it hard to understand paying attention to many controversial things associated with this topic, and your own results speak for themselves. I think several additional takeaways are the significance of following each of the ideas you presented above and being willing to be ultra unique about which one could really work for you best. Nice job.
Excellent post. I was checking constantly this blog and I am impressed! Extremely useful information particularly the last part I care for such information a lot. I was seeking this certain info for a long time. Thank you and best of luck.