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...

3,864 Responses

  1. Thank you so much for sharing this wonderful post with us.

  2. Marsuki表示:

    Nice i really enjoyed reading your blogs. Keep on posting. Thanks

  3. olumiant 1mg表示:

    diflucan ovule fluconazole diflucan yeast infection not going away after diflucan what if diflucan doesnt work

  4. Thank you for sharing indeed great looking !

  5. benadryl and seroquel prescription medicine quetiapine how to stop restless legs from seroquel how long does it take seroquel to leave your system

  6. The information shared is of top quality which has to get appreciated at all levels. Well done…

  7. Spirl表示:

    If your facility needs cleaning, call us today to learn more about our janitorial services. We work to create cleaner and healthier commercial environments you desire and deserve. Be confident knowing that your commercial area will be clean. If you are fed up of replacing your janitorial cleaning service in Morgan Hill because of their complacency or lack of follow-through, then its time to give Terra Cleaning a try. We offer professionalism, expertise and responsibility to deliver exceptional results that business owners can rely upon day & night. Cleaning for Year! What a perfect way to give that special someone a clean and healthy home to enjoy for many months. Click the button below to purchase your gift. For your convenience, Kings Cleaning also offers Office Cleaning, Property Management Cleaning & and Post-Construction Cleaning. https://sairux.com/forum/profile/phillipwhatmore While many have the ability, time, and resources to clean their homes themselves, others will ultimately opt for a professional cleaning service. Homeowners who travel frequently or who otherwise lack the time to clean their homes thoroughly may benefit from hiring a person or service to perform a house cleaning. Professional house cleaning services are also a great choice in some circumstances, such as for individuals who are recovering from injuries or have reduced mobility. They say that the kitchen is the heart of the home. We believe that if you keep your kitchen clean, the rest of the home will follow. Here’s a glimpse at the services we offer that keep your kitchen spotless. Now more than ever, workplaces need to be clean of germs and dirt to promote a healthy and effective workplace. Are you doing a disservice to the trust of your employees and customers by having  below par cleaning practices?  Food spills, dirt and dust build-up and the overall lack of routine cleaning are just some of the reasons why an office gradually starts losing its original shine.

  8. diflucan 50表示:

    chicken wormer ivermectin stromectol usa can you give ivermectin to dogs how long does it take for ivermectin to work on mites

  9. seroquel rash pictures seroquel low blood pressure what kind of drug is seroquel how long can you take seroquel

  10. rog表示:

    Before you move ahead with your remodel, clean and inspect the room. Now is the time to check for any structural damage, such as rot or mold in floors and walls, especially in areas closest to water supply or collection points. Make all necessary repairs before installing new features so you won’t have to rip apart your newly completed bathroom if problems become evident later. Build time and money into your budget for this first step. Ideally, you’ll have an alternate bathroom to use during the remodel so you can continue living in your home, even if there are any delays or unexpected problems. The cost of a midrange remodel to a hall bathroom—generally shared by multiple family members and occasionally visitors—is about $20,000, according to regional data from Remodeling’s 2020 Cost vs. Value report. If your hall bathroom is used by young children, it’s not the best place to invest in upscale selections like a spacious walk-in shower or top-of-the-line stone tile. Sticking to less expensive yet still functional fixtures and finishes, including a basic tub or shower and stock cabinetry, can help you lower your bathroom remodeling cost while still upgrading the space and adding to your home value in Northern Iowa. https://crewroom.ca/community/profile/xpmbrandy963058/ To keep value, there must be at least one bathtub in your home. It doesn’t need to be in the master bathroom as long as it is accessible for other occupants. This is typically called a guest bathroom. Remodeling magazine reports the average price for a midrange bathroom addition—the kind that adds square footage to the home—at $49,598 nationally. That’s the cost for a 6-foot by 8-foot bathroom addition built over a crawl space with poured concrete walls, including a tub shower combo with ceramic tile and a linen closet. Permits cost $50 to $2,000 depending on your location and what projects you’re doing. You’ll often need permits for electrical, framing, drywall, plumbing and some finishing’s. Permitting requirements vary from place to place, so check with your local code enforcement office. You need a permit if you are going to:

  11. rog表示:

    Many homeowners do not realize how much effort, material and professional labor goes into finishing a basement in a Wisconsin home. The basement is generally the largest unfinished space in your home and there are many structural issues along with finishing issues that will need to be addressed. You can find various estimates online regarding the value of finished basements to get an idea of what yours might be worth, but remember, these are just estimates. Our Cleveland home remodelers are happy to provide an in-home estimate to give you a more accurate value for your basement renovation. You may be able to finish your basement without a permit. However, this could cost you over a much longer period, much more to sell your home—or failing that. If something was to happen and you cannot document it, the job is ready. https://jaruma.com.ng/community/profile/clevelanddalget/ “The most challenging part of the design was fusing the old part of the house with the new addition,” says principal architect Alex Terry. The character and architectural integrity of the single-level 1950s ranch house was thoughtfully reconsidered during the addition and remodel. The home’s front porch, typical of the period, was refreshed with Ipe decking and railing. Another huge change will be our plan to paint the brick. Half of our house (including the entire side facing east) is already white vinyl, so this will just make things look more cohesive. Basically, ever since I saw this brick ranch makeover by Beneath My Heart, I was sold on painting our brick. It makes such a difference! Today’s home tour brings us to Thousand Oaks, California, and is a real testament to the potential of the ranch-style homes common to the 1960s. Jessica and Tyler and their 1964 home are well-known on Instagram for their stunning kitchen. But their whole home is beautiful and well thought-out and feels easy to live in. It’s amazing what’s possible with patience, planning, and a DIY mentality! I can’t wait to share this tour with you today…

  12. rog表示:

    In 2010–2011, the average cost of a major kitchen remodel for a middle-of-the-road project was $58,367, according to Remodeling Magazine, which publishes these figures annually. A minor remodel checked in at $21,695. At the other end of the spectrum—where, sometimes, old-house owners who like period details might find themselves—an upscale kitchen re-do cost an average of $113,464. Keep in mind that homeowners are likely to recoup only about 60 to 70 percent of the cost of a kitchen renovation when they sell the house. “Kitchens and baths are by far the most expensive rooms in the house because they are not only finish- and material-intensive (full of countertops, tile, and cabinets), but also carry additional budgetary demands due to plumbing, electric, and mechanical requirements,” says Steve Pallrand of design firm Home Front https://prosportservices.org/qna/profile/taj88o509644765/ Major refinishing job of our 100-year-old Antique Heart Pine kitchen great room floor. Installed in 1992 and now finished to furniture-grade result by Jeff Dean’s team of Hunter and David. Their equipment was 98% dustless as they promised and their focus on the work and desired finish were well above my already high expectations. A superior recommendation from me. A stunning job all around. Thank you. Vinyl plank flooring is a great flooring choice for, commercial and residential type of properties but it can be frustrating to install vinyl plank flooring to most DIY’s installing glue down or Click & luck type, maybe looking easy but working in the closets, around door frames and kitchen cabinets maybe a daunting, task thats why is best to call professional flooring Contractor to get your luxury Vinyl plank Flooring Installation done to the highest industry standards !

  13. Its wonderful as your other blog posts : D, regards for putting up.

  14. Nice blog. Could someone with little experience do it, and add updates without messing it up? Good information on here, very informative.

  15. Katinepisn表示:

    free slot
    old vegas slots games
    free online slots machines

  16. leer mas表示:

    I found your blog through google and I must say, this is probably one of the best well prepared articles I have come across in a long time. I have bookmarked your site for more posts.

  1. 2022-07-05

    dissertation editing services https://professionaldissertationwriting.org/

  2. 2022-07-06
  3. 2022-07-06
  4. 2022-07-06
  5. 2022-07-06

    dissertation help service https://dissertationhelpexpert.com/

  6. 2022-07-06
  7. 2022-07-06
  8. 2022-07-06

    writing my dissertation https://writing-a-dissertation.net/

  9. 2022-07-06

    online dissertation help veroffentlichen https://businessdissertationhelp.com/

  10. 2022-07-06
  11. 2022-07-07

    dissertation writing software https://writingadissertationproposal.com/

  12. 2022-07-07

    writing phd dissertation https://dissertationhelpspecialist.com/

  13. 2022-07-07

    writing dissertation and grant proposals https://dissertationhelperhub.com/

  14. 2022-07-07

    online dissertation help veroffentlichen https://customthesiswritingservices.com/

發佈留言

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