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>
The perspective is like a rare gem, valuable and unique in the vastness of the internet.
https://autolux-azerbaijan.com/# Pin-Up Casino
Dziękuję za szczegółowe wyjaśnienia dotyczące strategii SEO.
The passion you pour into The posts is like a flame, igniting curiosity and warming the soul.
Bardzo pouczający blog na temat SEO! Dzięki za podzielenie się nim.
A breath of fresh air, or what I needed after being suffocated by mediocrity.
Pin Up Azerbaycan ?Onlayn Kazino: Pin Up – Pin Up Kazino ?Onlayn
Czuję się znacznie pewniej w temacie SEO po przeczytaniu tego bloga.
pin-up kazino: Pin Up – Pin Up Azerbaycan ?Onlayn Kazino
Unique viewpoints, because who needs echo chambers?
https://autolux-azerbaijan.com/# pin-up360
I must admit, The depth of analysis is as attractive as The words. Great work has never looked so good.
https://autolux-azerbaijan.com/# pin-up 141 casino
Pin Up: ?Onlayn Kazino – Pin-Up Casino
To była otwierająca oczy lektura na temat ryzyk i procesu SEO.
Pin Up Azerbaycan: Pin Up Azerbaycan – pin-up kazino
Ten blog to cenne źródło informacji dla właścicieli stron internetowych.
Dzięki za kompleksowy przewodnik po tym, czego można oczekiwać podczas wdrażania SEO.
The passion for this subject shines through The words. Inspiring!
I’m so glad I stumbled upon this article. It was exactly what I needed to read!
That is a great tip especially to those fresh to the blogosphere. Short but very precise information… Appreciate your sharing this one. A must read article.
Świetne źródło informacji dla każdego, kto ma do czynienia z SEO.
Bardzo pomocne informacje! Czuję się lepiej przygotowany do radzenia sobie z SEO.
There are certain posts out there near this, I’m sure taking there reference could experience made this spot or article really informative. I’m not expression this post is unhealthy. Simply I must pronounce which the info provided here was unique, merely to make it more in close proximity to complete, supporting for some other former information will get been actually good. The points you obtain touched allow me to share really important, thus I most certainly will spot a few of the information here to make this actually great for entirely the newbie’s here. Many thanks these records. Actually helpful!
Dzięki za szczegółowy przegląd procedur SEO.
You ought to get involved in a contest for one of the most effective blogs over the internet. I’ll recommend this great site!
купить аттестат за 11 класс http://vm-tver.ru .
I love your blog site.. great colorings & style. Did a person style and design this fabulous website you as well as have you actually hire an attorney to make it work to suit your needs? Plz respond as I!|m looking to layout my own, personal weblog in addition to would wish to understand in which ough bought the following via. appreciate it
Thanks for your thoughts. One thing I have noticed is that often banks as well as financial institutions know the dimensions and spending practices of consumers plus understand that plenty of people max away their own credit cards around the getaways. They sensibly take advantage of this particular fact and start flooding your inbox in addition to snail-mail box along with hundreds of no-interest APR credit card offers shortly after the holiday season finishes. Knowing that if you are like 98 of American community, you’ll leap at the chance to consolidate card debt and shift balances for 0 interest rates credit cards.
This blog was… how do I say it? Relevant!! Finally I’ve found something that helped me. Thank you!