HTML5 Canvas標籤範例

隨著時代的進步,HTML的版本一直在進化,目前比較新的版本應該就是HTML5了,這次的HTML5針對許多標籤進行調整,當然也新增了一些標籤,主要的目的是希望可以將一些本來需要利用Flash才可以完成的互動頁面取而用HTML5來進行設計,這樣比較能減輕網頁的負載,但不管怎麼進步,其最重要的目的當然還是要網友能夠看到才行!

目前各家的瀏覽器對於HTML5的支援都不一,如果想要測試看看自己所使用的瀏覽器對HTML5的支援程度,可以到這個網址測試,馬老師針對目前的三款瀏覽器(IE9、Firefox6、Chrome13)來做了測試,IE9於HTML5中測試得到了以下的分數:

IE9於HTML5中測試分數

Firefox6於HTML5中測試得到了以下的分數:

Firefox6於HTML5中測試分數

Chrome13於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>

You may also like...

11,626 Responses

  1. Mazrpjh表示:

    Приобретение диплома ПТУ с сокращенной программой обучения в Москве

    rolevikionline.g-talk.ru/viewtopic.php?f=21&t=2480

  2. Russelljorry表示:

    1хставка: 1xbet – 1хбет

  3. Ernestexove表示:

    casino siteleri: cazino – en iyi casino siteleri

  4. humandesignxb表示:

    Тема «Четыре типа в Дизайне Человека» важна для понимания не только на теоретическом, но и на практическом уровне. Этот инструмент самопознания помогает каждому из нас осознать свою природу и использовать индивидуальные особенности для улучшения качества жизни. Рассмотрим рационально-практическую сторону каждого из типов, их определения и различия.

    Первый тип в Дизайне Человека – это Генератор. Он отличаются высокой энергетичностью и способностью легко и эффективно завершать начатые задачи. Этот тип создан для работы, и его главное стремление — заниматься тем, что приносит удовольствие. Генератор начинает действовать, когда ощущает внутренний отклик. Их индивидуальная особенность заключается в том, что энергия накапливается, только когда они следуют своему отклику.

    Второй тип — это Манифестор. Манифесторы могут начинать новые проекты и вдохновлять других. Они не нуждаются в отклике, как Генераторы, и могут сразу принимать решения и действовать. Различие этого типа в том, что они лучше всего проявляют себя, когда свободны от ограничений. Их рациональная роль — прокладывать путь для других.

    Также важный элемент системы Дизайна Человека — Проектор. Проекторы – это люди, которые видят потенциал в других и помогают его раскрыть. Они нуждаются в приглашении, прежде чем начать действовать, и могут эффективно использовать энергию, когда работают с другими людьми. Их сила — в правильном руководстве и управлении чужими ресурсами. Проекторы наиболее эффективны, когда действуют в роли консультантов.

    Четвертый тип в Дизайне Человека — это Рефлектор. Рефлекторы — это люди, которые отражают состояние окружающей среды. Они, как зеркало, отражают общее состояние общества или коллектива. Рефлекторы могут стать прекрасными аналитиками, так как они замечают мельчайшие изменения.

    В итоге можно сказать следующее: Каждый из четырех типов в Дизайне Человека имеет свои индивидуальные особенности, которые помогают им максимально эффективно взаимодействовать с миром. Понимание своего типа и его практического предназначения позволяет лучше организовать жизнь, выбрать правильные направления для работы и улучшить качество личных отношений.

    источник

  5. Профессиональный сервисный центр по ремонту моноблоков iMac в Москве.
    Мы предлагаем: сервисный центр imac
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  6. Diplomi_yjkl表示:

    купить диплом техникума в нижнем новгороде server-diploms.ru .

  7. Lazrlgm表示:

    Аттестат школы купить официально с упрощенным обучением в Москве

    satopttorg.ru/forum/user/4943

  8. Sazrica表示:

    Вопросы и ответы: можно ли быстро купить диплом старого образца?
    av.flyboard.ru/viewtopic.php?f=9&t=1764&sid=b59c76c197c737619e1a4d68bcc9e44a

  9. humandesignwu表示:

    Тема «Четыре типа в Дизайне Человека» важна для понимания не только на теоретическом, но и на практическом уровне. Этот инструмент самопознания помогает каждому из нас осознать свою природу и использовать индивидуальные особенности для улучшения качества жизни. Рассмотрим рационально-практическую сторону каждого из типов, их определения и различия.

    Первый тип в Дизайне Человека – это Генератор. Он отличаются высокой энергетичностью и способностью легко и эффективно завершать начатые задачи. Этот тип создан для работы, и его главное стремление — заниматься тем, что приносит удовольствие. Генератор начинает действовать, когда ощущает внутренний отклик. Основное отличие Генераторов в том, что они заряжают себя и других энергией, если действуют в соответствии с внутренним откликом.

    Следующий тип, на который стоит обратить внимание, — Манифестор. Этот тип уникален своей независимостью и способностью инициировать действия. Они не нуждаются в отклике, как Генераторы, и могут сразу принимать решения и действовать. Манифесторы не подчиняются внешним обстоятельствам, а сами создают свою реальность. Главная их практическая задача — инициировать изменения.

    Не менее значимая категория — Проектор. Проекторы – это люди, которые видят потенциал в других и помогают его раскрыть. Они нуждаются в приглашении, прежде чем начать действовать, и могут эффективно использовать энергию, когда работают с другими людьми. Индивидуальная особенность Проектора заключается в умении работать с чужой энергией и направлять ее. Практическая задача Проектора – это координирование и организация.

    Последний, но не менее важный тип — Рефлектор. Они лучше всего ощущают общие тенденции и могут объективно оценивать ситуацию. Они, как зеркало, отражают общее состояние общества или коллектива. Рефлекторы могут стать прекрасными аналитиками, так как они замечают мельчайшие изменения.

    Заключение Каждый из четырех типов в Дизайне Человека имеет свои индивидуальные особенности, которые помогают им максимально эффективно взаимодействовать с миром. Понимание своего типа и его практического предназначения позволяет лучше организовать жизнь, выбрать правильные направления для работы и улучшить качество личных отношений.

    источник

  10. дом интернат для инвалидов http://www.xn—-1-6cdshu4albf3aye.xn--p1ai/ .

  11. A breath of fresh air, or what I needed after being suffocated by mediocrity.

  12. Making hard to understand topics accessible, you’re like the translator I never knew I needed.

  13. Sazrdvj表示:

    Как оказалось, купить диплом кандидата наук не так уж и сложно
    mihail.ekafe.ru/viewtopic.php?f=16&t=5055

  14. EdwardGuina表示:

    пинап казино: pin up kz – пин ап казино

  15. Diplomi_pjma表示:

    купить дипломы вуза срочно landik-diploms.ru .

  16. обслуживание в домах интернатах обслуживание в домах интернатах .

  17. Jamescix表示:

    1xbet скачать 1хбет 1хбет

  18. Russelljorry表示:

    пинап: пин ап казино – пин ап кз

  19. Diplomi_qfma表示:

    стоит купить диплом о высшем образовании landik-diploms.ru .

  20. Ernestexove表示:

    пин ап официальный сайт: пин ап зеркало – пин ап зеркало

  21. Zxprel表示:

    eurax ca – crotamiton buy online aczone over the counter

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。