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>
I’d should seek advice from you here. Which isn’t something I do! I love to reading an article that will get people to believe. Also, thank you allowing me to comment!
Your content is valid and informative in my personal opinion. You have really done a lot of research on this topic. Thanks for sharing it.
Previous to you decide to create your own checklist to add an idea associated with what camping checklist ought to. Really … A listing can be greater than what you need.
You can offer coupons to attract new business.
Wow, wonderful blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is great, let alone the content!
i always make sure that our kitchen appliances are very clean and shiny before using them.
Здравствуйте!
Мы изготавливаем дипломы любых профессий по приятным тарифам.
eicolumbaira.es/купить-вкладыш-диплома-о-высшем-образ
Привет!
Всё, что нужно знать о покупке аттестата о среднем образовании
tanhashop.com/category/uncategorized/page/2
Будем рады вам помочь!.
There are a handful of intriguing points over time in this article but I do not determine if they all center to heart. You can find some validity but I’m going to take hold opinion until I take a look at it further. Excellent post , thanks and we want much more! Put into FeedBurner too
brand hytrin 1mg – how to get terazosin without a prescription order priligy online
Добрый день!
Заказать документ о получении высшего образования
ast-diploms.com/kupit-diplom-nizhnij-novgorod
Добрый день!
Парадокс, но купить диплом кандидата наук оказалось не так и сложно
landik-diploms-srednee.ru/diplom-bakalavra
Wow that was strange. I just wrote an extremely long comment but after I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again. Regardless, just wanted to say excellent blog!
Привет, друзья!
Приобрести диплом любого университета.
dev.spooo.ru/post/article/217862
Здравствуйте!
Где и как купить диплом о высшем образовании без лишних рисков
mans-diplomasxx.ru
Really nice style and design and excellent content , nothing at all else we need : D.
Thx for your personal great post! I seriously liked reading this, you’re an great author. I shall always save your blog and will eventually revisit at some point. We wish to motivate continue your terrific work, have a nice holiday weekend… FYI have you read Syria eye-popping news reports? Cheers … Easy Website Builder
Wholesale Cheap Handbags Will you be ok merely repost this on my site? I’ve to allow credit where it can be due. Have got a great day!
Awesome blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple tweeks would really make my blog shine. Please let me know where you got your design. Thank you
Здравствуйте!
Как избежать рисков при покупке диплома колледжа или ПТУ в России
nigerianelections2019.com/купить-диплом-проверенные-способы
Поможем вам всегда!.
ibuprofen is a good pain reliever but i heard that this one have nasty side effects too~
You made some respectable points there. I appeared on the web for the difficulty and located most people will associate with along with your website.
of the asian foods that i tastes, japanese foods and thai foods are the tastiest stuff”
Привет!
Приобрести диплом о высшем образовании.
dailygram.com/blog/1304350/4-%D0%B5-%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D1%8B%D1%85-%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D1%8B-%D0%BE%D0%BD%D0%BB%D0%B0%D0%B9%D0%BD-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%BE%D0%B2-%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B5-%D0%BF%D1%80%D0%BE%D0%B4%D0%B0%D1%8E%D1%82-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B/
One thing I have actually noticed is that there are plenty of beliefs regarding the financial institutions intentions whenever talking about property foreclosure. One delusion in particular would be the fact the bank desires your house. The lender wants your hard earned dollars, not your property. They want the bucks they loaned you together with interest. Avoiding the bank is only going to draw some sort of foreclosed conclusion. Thanks for your post.
Привет, друзья!
Заказать документ о получении высшего образования вы можете у нас.
diploms-x.com/kupit-diplom-nizhnij-novgorod
Хорошей учебы!
i like it jobs because it is a high paying job and you work in an air conditioned office**
I was suggested this web site through my cousin. I’m not positive whether this submit is written through him as no one else recognise such special approximately my difficulty. You’re wonderful! Thanks!
Привет!
Купить диплом ВУЗа.
laporteproperty.com/en/cb-profile/pluginclass/cbblogs?action=blogs&func=show&id=121
I’ve been exploring for a little for any high-quality articles or blog posts on this sort of area . Exploring in Yahoo I ultimately stumbled upon this website. Studying this information So i’m satisfied to convey that I’ve a very excellent uncanny feeling I found out exactly what I needed. I most unquestionably will make certain to don’t omit this website and provides it a glance a continuing.