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 would like to point out my appreciation for your generosity for visitors who need help on this theme. Your very own dedication to getting the message across ended up being astonishingly informative and have always permitted women like me to realize their pursuits. The invaluable report signifies so much a person like me and much more to my office colleagues. Regards; from each one of us.
The crucial point to recognize is this fact applies not just in , but additionally to.
I’d forever want to be update on new content on this web site , saved to bookmarks ! .
Nice post. I learn something new and challenging on blogs I stumbleupon on a daily basis. It’s always helpful to read articles from other authors and practice something from their web sites.
Если вы искали где отремонтировать сломаную технику, обратите внимание – сервисный центр в перми
Pretty! This was an incredibly wonderful post. Many thanks for providing this info.
top 10 pharmacies in india: world pharmacy india – buy medicines online in india
purple pharmacy mexico price list medicine in mexico pharmacies buying prescription drugs in mexico online
Well done on tackling such a tough subject.오피
medicine in mexico pharmacies: mexican border pharmacies shipping to usa – buying prescription drugs in mexico
buy diclofenac tablets – purchase voveran cheap nimodipine generic
This is a topic that is near to my heart… Cheers! Where are your contact details though?
https://indianpharmacy.company/# world pharmacy india
Hi there! I simply wish to offer you a big thumbs up for the great information you have right here on this post. I will be coming back to your site for more soon.
top online pharmacy india: buy prescription drugs from india – top 10 pharmacies in india
pup 47779160957941 deoqy
buy prescription drugs from india indian pharmacy paypal buy prescription drugs from india
There are some fascinating closing dates on this article however I don know if I see all of them heart to heart. There’s some validity however I will take maintain opinion till I look into it further. Good article , thanks and we would like more! Added to FeedBurner as properly
sometimes you got to taper down on playing too much compter games coz it is quite addictive”
tacrolimus pharmacy: pharmacy store design layout – uk online pharmacy propecia
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем: ремонт бытовой техники в казани
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Профессиональный сервисный центр по ремонту стиральных машин с выездом на дом по Москве.
Мы предлагаем: ремонт стиральных машин в москве прайс
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Yay google is my king assisted me to find this outstanding site! .
An impressive share! I’ve just forwarded this onto a colleague who has been conducting a little homework on this. And he in fact ordered me breakfast due to the fact that I found it for him… lol. So allow me to reword this…. Thanks for the meal!! But yeah, thanx for spending the time to talk about this issue here on your web page.
advair pharmacy assistance: pharmacy continuing education online – pharmacy course online
buying prescription drugs in mexico mexico pharmacies prescription drugs reputable mexican pharmacies online
Hello, I think your web site could be having internet browser compatibility problems. When I take a look at your website in Safari, it looks fine but when opening in IE, it’s got some overlapping issues. I merely wanted to give you a quick heads up! Besides that, excellent website!
https://indianpharmacy.company/# top 10 pharmacies in india
Компетентный психотерапевт онлайн. Терапия возможна 24/7. Конфиденциально, продуктивно. Выгодные цены. Начните менять жизнь сегодня! https://220-id-psiholog.tds-ka.ru/
Если вы искали где отремонтировать сломаную технику, обратите внимание – профи услуги