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>
express pharmacy: pharmacy prices – boot pharmacy store locator
mail order pharmacy india: buy prescription drugs from india – top 10 pharmacies in india
But wanna remark that you have a very decent internet site , I love the design it really stands out.
Профессиональный сервисный центр по ремонту видео техники а именно видеокамер.
Мы предлагаем: ремонт видеокамер
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Pretty right subdivision. I just came across your website and wanted to tell that I have really enjoyed reading your opinions. AnyhowI’ll be coming back and I hope you post again soon.
indian pharmacy paypal india pharmacy top online pharmacy india
Nice Information! I personally really appreciate your article. This is a great website. I will make sure that I stop back again!.
http://pharmbig24.com/# muscle relaxant
genoa pharmacy: animal pharmacy online – simvastatin uk pharmacy
indian pharmacy online: reputable indian online pharmacy – best online pharmacy india
pharma indomethacin pharmacy benicar hct online pharmacy
An intriguing discussion is definitely worth comment. I do think that you should publish more about this issue, it may not be a taboo subject but generally people do not talk about such topics. To the next! Kind regards!
Если вы искали где отремонтировать сломаную технику, обратите внимание – тех профи
Hi there, just became aware of your blog through Google, and found that it’s really informative. I?m gonna watch out for brussels. I will appreciate if you continue this in future. A lot of people will be benefited from your writing. Cheers!
Generally I don’t read post on blogs, however I wish to say that this write-up very pressured me to try and do it! Your writing style has been surprised me. Thanks, very nice post.
I was just chatting with my coworker about this last week at the resturant. Don’t know how in the world we landed on the subject really, they
sometimes you got to taper down on playing too much compter games coz it is quite addictive”
http://mexicopharmacy.cheap/# medication from mexico pharmacy
indian pharmacy online top 10 online pharmacy in india indian pharmacy
I’m very happy to find this website. I want to to thank you for your time just for this wonderful read!! I definitely liked every bit of it and i also have you book-marked to see new stuff in your blog.
Online medicine order: cheapest online pharmacy india – indian pharmacies safe
Very Nice website. I recently engineered mine and that i was craving for some ideas and you gave me a number of. might i raise you whether or not you developed the web site by youself ?
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем:сервис центры бытовой техники новосибирск
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
After study just a few of the blog posts in your web site now, and I actually like your means of blogging. I bookmarked it to my bookmark website listing and will probably be checking again soon. Pls check out my web page as properly and let me know what you think.
Immigration Solicitors… […]below you’ll find the link to some sites that we think you should visit[…]…
The very next time I read a blog, I hope that it won’t fail me just as much as this particular one. After all, I know it was my choice to read through, however I genuinely thought you’d have something helpful to talk about. All I hear is a bunch of whining about something you can fix if you were not too busy searching for attention.
pharmacy rx one coupons: linezolid pharmacy – target pharmacy prednisone
Thanks for your post right here. One thing I would really like to say is that most professional areas consider the Bachelors Degree like thejust like the entry level standard for an online education. Although Associate College diplomas are a great way to get started, completing a person’s Bachelors opens many opportunities to various professions, there are numerous on-line Bachelor Course Programs available by institutions like The University of Phoenix, Intercontinental University Online and Kaplan. Another concern is that many brick and mortar institutions present Online variations of their certifications but typically for a substantially higher payment than the corporations that specialize in online education programs.
I really like it when people come together and share opinions. Great site, keep it up.
Профессиональный сервисный центр по ремонту планшетов в Москве.
Мы предлагаем: ремонт планшетов в москве
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!