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>
custom essays usa
essay revision help online
essay paper help
Good day! This is my first comment here so I just wanted to give a quick shout out and say I really enjoy reading through your articles. Can you recommend any other blogs/websites/forums that cover the same subjects? Thanks a lot!
https://datingtopreview.online/# dating direct
You certainly deserve a round of applause for your post and more specifically, your blog in general. Very high quality material!
https://datingtopreview.online/# best online dating websites
1411
Hello.This article was extremely interesting, particularly since I was searching for thoughts on this subject last couple of days.
tadalafil cialis from india Laboratory studies support activity against Pneumocystis species and some other fungal infections, although clinical data are lacking 21, 22
buy cheap generic cialis uk 5 7 2013 Women consuming at last two servings weekly of peaches or nectarines saw a stunning 41 percent risk reduction for postmenopausal ER breast cancer, while those eating at least one serving of blueberries weekly saw a 31 percent risk reduction, according to one of the largest and longest running studies
Enhancers are essential distal DNA regulatory elements that control temporal or spatial specific gene expression patterns during development and other biological processes 9 brand name cialis online I had the numbing and tingling in my hands and feet that yes eventually went away after months of taking topamax but I want having a migraine
Bryce aFVlhEldtAdGncju 6 27 2022 best place to buy cialis online reviews
buy cialis cheap I don t let my husband look at it
Erkrankung, lu y c, available, warnings buying cheap cialis online
Whereas two years ago, the state had about 3, 200 employees processing unemployment claims, it has cut more than a 1, 000 of those positions since then cialis super active Do you take Nasacort aq and Tamoxifen citrate
Young AMlzoEGQxS 5 20 2022 generic cialis online People see Pinot Noir on the label and very few would know that could mean a wine that s only seventy five percent Pinot, Rick Moshin, Moshin Vineyards
academic essay services
essay cheap
write my essay students
National Accreditation Program for Breast Centers cialis generic tadalafil The contralateral side to the lesion served as control n 8
instant essay writer
essay writer service review
essay conclusion help
Cialis Super Activo donde comprar el viagra consecuencias del ketorolaco para que es la gabapentina de 300mg comprar sibutramina barata para que sirve bromocriptina 2 5mg levotiroxina hipertiroidismo fluconazol dosis semanal ciprofloxacina cuanto cuesta la ampicilina es un antibiotico purchasing cialis online chloroquine increases toxicity of risperidone by QTc interval
Establishing an understanding of hair and nail abnormalities can be vital in assessing a patient s overall health, especially in the context of cancer detection and treatment cialis with dapoxetine
tadalafil generic vs cialis Influence on the ability to drive vehicles and mechanisms
buy cheap essays online
essay revision help online
essays on the movie the help
comprar cialis online 15883, Teo, La CoruГ±a, Spain; E mail jrcaeiro arrakis
and at the same time arranged two or three sword rain limitless male enhancement formations behind him cheapest cialis available
cheap essay writers
essay help
someone write my essay for me
write my essay affordable
essay writing services recommendations
help me write essay
write my essay review
common application essay help
buy essays online safe
I Am Going To have to come back again when my course load lets up – however I am taking your Rss feed so i can go through your site offline. Thanks.
Glad to be one of several visitors on this awful internet site : D.
need help with essay
urgent essay help
mba essay service