11html5開發(fā)精要與實(shí)例詳解

4個(gè)部分，讀者既能根據(jù)步驟動(dòng)手實(shí)踐，又能重點(diǎn)學(xué)習(xí)案例中用到的理論知識(shí)，同時(shí)還能源代碼的設(shè)計(jì)思路和方法；第二部分講解了jWebSocket、RGraph、WebGL等3個(gè)重要框架和技術(shù)的詳細(xì)使用方法。講，HTML5Web開發(fā)標(biāo)準(zhǔn)的一次重要飛躍，它不僅能提供更加豐富、強(qiáng)大、而HTML5提供了對(duì)這些功能的原生支持。插件的方式存在很多問題：插件可以被禁用或（例如Apple的iPad就不支持Flash插件。應(yīng)的HTML5，如<audio>和<>等各種，不需要任何插件，就可以像使用<img>一樣方便地在頁面內(nèi)嵌入音頻和。過去，網(wǎng)頁中顯示的圖像來自于直接的GIF或JPG圖像，而在HTML5中，圖像可能發(fā)人員可以在JavaScript層針對(duì)動(dòng)態(tài)數(shù)據(jù)進(jìn)行計(jì)算后繪制出各種復(fù)雜的圖形。另外，目前已經(jīng)開發(fā)出一些針對(duì)HTML5的類似工具，這些工具將進(jìn)一步提高Web開發(fā)人員駕馭圖像的Web程序其實(shí)早就可以利用瀏覽器端的本地空間很多信息，比如IE允許最多300個(gè)，最多4096字節(jié)的內(nèi)容。不過，要開發(fā)真正實(shí)用的Web應(yīng)用，需要的存儲(chǔ)空間。通過HTML5，可以實(shí)現(xiàn)這種需求。序都可以照常運(yùn)行，因?yàn)橹耙呀?jīng)從服務(wù)器上了HTML5應(yīng)用的JavaScript代碼，這部Web開發(fā)人員都知道，HTML5之前的HTML結(jié)構(gòu)除了告訴瀏覽器HTML5中所謂的微格式（microformat）引入了一種新的機(jī)制，它在HTML中新增了一些專門的，以幫助程序員分析中數(shù)據(jù)的真實(shí)含Web應(yīng)用。如果有一個(gè)好的、標(biāo)準(zhǔn)的置服務(wù)可以很好地解決這個(gè)問題。HTML5允許JavaScript詢問瀏覽器用戶的地理位置，比Fi，讓W(xué)eb更流HTML5中的 引起了很多Web開發(fā)人員的強(qiáng)烈，越來越多的開發(fā)人員開始學(xué)習(xí)并在實(shí)際工作中嘗本書。希望本書能夠?yàn)橹铝τ诶肏TML5Web應(yīng)用的讀者提供一些參考，使讀者對(duì)HTML5有一個(gè)比較深入的了解，并能夠在未來的互聯(lián)網(wǎng)開發(fā)工作中充分運(yùn)用這些知識(shí)。目前HTML5的應(yīng)用在國內(nèi)還處于初級(jí)階段，市面上已經(jīng)的相關(guān)幾乎都以講際案例的更是少之又少。HTML5的功能豐富而強(qiáng)大，掌握了它的基本功能并不代表能自如例為主，針對(duì)HTML5的每個(gè)重要知識(shí)點(diǎn)都設(shè)計(jì)了大型的案例，這些案例不僅實(shí)踐性極強(qiáng)，HTML5HTML5開設(shè)Web設(shè)計(jì)相關(guān)課程的大專院校學(xué)生的作用。讀者也可以向某些Web或Web應(yīng)用程序添加一些調(diào)試代碼，或者在源代碼的HTML5API有一個(gè)比較深入的理解，進(jìn)而更快地編寫出屬于自己的HTML5或Web應(yīng)用程序。Chrome12.0、Safari5.0以及IE9.0）HTML5的支持情況。批評(píng)指正。筆者號(hào)碼為，聯(lián)系郵箱為 ，歡迎讀者通過QQ或E-mail與筆者聯(lián)系，期待得到讀者的反饋。謹(jǐn)以此書獻(xiàn)給眾多熱愛HTML5的朋友們，以及國內(nèi)致力于Web及Web應(yīng)用程序開發(fā)第1章用HTML5中的結(jié)構(gòu)元素構(gòu) 2WebHTML 第5章 第6章本地 78WebWorkers 11RGraph概述 繪 附錄五大瀏覽器 1HTML5中的結(jié)構(gòu)元素構(gòu)建本章主要通過一個(gè)博客與一個(gè)企業(yè)的制作來向讀者展示如何合理運(yùn)用HTML中的各種結(jié)構(gòu)元素，搭建出一個(gè)語義清晰、結(jié)構(gòu)分明的Web3.0時(shí)代 HTML5中的各種結(jié)構(gòu)元素來構(gòu)建博客的案例，旨在通過該從而構(gòu)建出與之相類似的、結(jié)構(gòu)分明的、語義清晰的HTML5。在介紹具體案例之前，先概要介紹一下HTML5中的網(wǎng)頁結(jié)構(gòu)與HTML4中的網(wǎng)頁結(jié)構(gòu)的區(qū)別；HTML5HTML5與CSS .1案例知識(shí)點(diǎn)<h1>1HTML5的基礎(chǔ)知識(shí)<h2>1.1HTML5概述<h3>1.1.1HTML5<h2>1.2HTML5快速入門<h3>1.2.1HTML1-2<div<h1>1HTML5的基礎(chǔ)知識(shí)<div<h2>1.1HTML5概述<div<h3>1.1.1HTML5<div<div<h2>1.2HTML5快速入門<div<h3>1.2.1HTML.1案例知識(shí)點(diǎn)qsection例如，針對(duì)1-2中的代碼，我們可以使用section元素進(jìn)行頁面文檔結(jié)構(gòu)的劃1-3<h1>1HTML5的基礎(chǔ)知識(shí)<h2>1.1HTML5概述<h3>1.1.1HTML5<h2>1.2HTML5快速入門<h3>1.2.1HTML不要將section元素與div元 使用。當(dāng)一個(gè)容器需要直接定義樣式或通定divsection廓工具HTML5的說明中有“untitledsection”（沒有標(biāo)題的section）文字，這個(gè)section就可能屬于使用不當(dāng)（nav元素或aside元素沒有標(biāo)題是合理的）。在一個(gè)section元素或article元素內(nèi)，應(yīng)該只有一個(gè)標(biāo)題，如果有兩個(gè)標(biāo)題，則第二個(gè)標(biāo)題會(huì)被隱式放入一個(gè)新的section元 內(nèi)，如下面的代碼所示，h2元 在article .1案例知識(shí)點(diǎn)headerheader的一個(gè)article元素或section元素的標(biāo)題，也可以包含其他內(nèi)容，例如數(shù)據(jù)表格、搜索表。3.HTML5頁的大綱。因此，在組織這份大綱的時(shí)候，不能使用頁的大綱。因此，在組織這份大綱的時(shí)候，不能使用div元素，因?yàn)閐iv”1-4<!DOCTYPE（正文（正文（正文.1案例知識(shí)點(diǎn) <!DOCTYPE1-21-2加入網(wǎng)頁標(biāo)題后的頁面大綱和headerh1～h61-6<!DOCTYPE<title>企業(yè)<imgsrc="title.jpg"alt="用來顯示企業(yè)名稱的圖圖1- .1案例知識(shí)點(diǎn) <h1><imgsrc="title.jpgalt="企業(yè)名稱 HTML5 1-4header另外，在HTML5中，body元素、blockquote元素、fieldset元素、td元素、details獨(dú)立的大綱，并且這些元素內(nèi)的獨(dú)立的大綱，并且這些元素內(nèi)的section元素、article元素、標(biāo)題元素(h1～h6元素)、nav.1案例知識(shí)點(diǎn)在代1-7中，blockquote元素內(nèi)部有一個(gè)h1元素，正是因?yàn)檫@個(gè)h1元素是于blockquote元素內(nèi)部的，所以在針對(duì)blockquote元素的父元素body生成頁面大綱時(shí)<!DOCTYPE基礎(chǔ)知識(shí)來搭建一個(gè)語義清晰、結(jié)構(gòu)分明的HTMLHTML .2博客首頁的實(shí)現(xiàn)1-7的1-81-91-9博客首頁生成的大綱1-10（點(diǎn)擊查看大圖）（點(diǎn)擊查看大圖）1-101-111-11前面介紹過，header頁面或頁面內(nèi)的一個(gè)article元素或section元素的標(biāo)題。在博客首頁中，一般將博客的標(biāo) nav1.1.2博客首頁的實(shí)現(xiàn)1.1.2博客首頁的實(shí)現(xiàn)<h1>HTML5Web開1-12博客首頁的網(wǎng)頁標(biāo)題部分生成的大綱由1-12博客首頁的網(wǎng)頁標(biāo)題部分生成的大綱由于該網(wǎng)頁使用了一個(gè)header元素來顯示網(wǎng)頁標(biāo)題，并且在header元素 h1元素，元素中的文字為“HTML5Web開 ”，因此整個(gè)大綱的標(biāo)題為“1.HTML5開”。在header元素內(nèi)部，使用nav元素來顯示整的導(dǎo)，并且沒給nav元素添加標(biāo)題（在HTML5中，并不強(qiáng)求對(duì)nav元素添加標(biāo)題），所以這個(gè)沒有標(biāo)題的nav元素在大綱中生成標(biāo)題為“1.UntitledSection”的節(jié)。 1-8網(wǎng)頁標(biāo)題部分的代碼<!DOCTYPE<title>HTML5Web開發(fā)<metacontent="" <metacontent=""<linkhref="main.css"type="text/css"<div<header<div<h1id="blogname">HTML5Web開發(fā)<div<nav<ul<a<a作為容器的div元素，以顯示該網(wǎng)頁的背景圖，樣式代碼如下所示。div#blogdiv#blogbackground-position:50%width:6.}1.1.2博客首頁的實(shí)現(xiàn)3.1-14 1-15側(cè)邊欄部分生成的大綱1-15側(cè)邊欄部分生成的大綱.2博客首頁的實(shí)現(xiàn)由于沒有對(duì)側(cè)邊欄添加標(biāo)題（HTML5），而且側(cè)邊欄位于 在博主介紹欄目中，使用在博主介紹欄目中，使用figure元素來顯示博主頭像。在HTML5中，figurefigcaption元素表示figure元素的標(biāo)題，它從屬于figure元素，必須書寫在元素內(nèi)部，可以書寫在figure元素內(nèi)的其他從屬元素的前面或后面。一個(gè)figure元素內(nèi)最多允許放置一個(gè)figcaption元素，但允許放置多個(gè)其他元素。<imgsrc="images\tyl.jpg"alt="HTML5Web開發(fā)4.9.在在網(wǎng)友評(píng)論欄目中，使用time元素與pubdate屬性來顯示每篇評(píng)論 。在HTML中，time元素代表24小時(shí)中的某個(gè)時(shí)刻或某個(gè)日期，time元素的putdate屬性代表了評(píng)論的發(fā)布日期和時(shí)間（關(guān)于figure元素與time元素的詳細(xì)介紹，可以參閱筆者所著《HTML5 <timedatetime="2011-04-01T16:59"pubdate>04-014. 1-9博客首頁的側(cè)邊欄部分的代<div<div<section<header<div<imgsrc="images\html5.jpgalt="HTML5Web<div<a /product.aspx? ;ref=search-1-pub《HTML5與CSS3指南 <div<section<header<span<a<div<nav<li"<li<ahref="#"target="_blank">HTML<li<ahref="#"<li<ahref="#"<li<ahref="#"<div<section<header<div<nav<ul<li<div<span><ahref="#"target="_blank"pubdate>04-01<div<div<ahref="#" <li<div<span><ahref="#" <timedatetime="2011-03-"pubdate>03-31<div<div<ahref="#" 哈<li<div<span>[]新浪網(wǎng)pubdate>03-31<div<div<ahref="#"<li<div<span>[]新浪網(wǎng)pubdate>03-31<div<div<ahref="#"<div.2博客首頁的實(shí)現(xiàn)在這段代碼中，第一行的id為“blogbody”的divmargin:3.“</div>idcolumn_1divid“blogbody”的div元素的結(jié)束。5.9.1-16 1.1.2博客首頁的實(shí)現(xiàn)1.1.2博客首頁的實(shí)現(xiàn)header3.分類”的節(jié)。這據(jù)據(jù)”，所以在大綱中分別生成標(biāo)題為“1.HTML5中新增number元素的屬性”、“2.HTML5使用step、“3.如何將元素與datetime-local元素應(yīng)用在Web程序?”和“4.ASP.NETMVC3書店—第四節(jié);”的四個(gè)節(jié)。另外，四個(gè)section元素中又各自有一個(gè)footer 分的section元素的結(jié)尾處又使用了一個(gè)footer元素，顯示對(duì)文 列表進(jìn)行分頁。于footer元素中沒有標(biāo)題元素（h1～h6元素）用于生成大綱，所以在大綱中沒有根據(jù)這些顯示博客首頁的主體內(nèi)容部分的section1-10碼<div<section<header<span<a<div<div<div<h1<ahref="#"">(2011-04-05<div<atarget="_blank"<div 設(shè)置和該元素中的數(shù)值。 number <footer<div<ahref="#"target="_blank">閱讀 <atarget="_blankhref="#">評(píng)論 <ahref="javascript:;"onclick="return <div<span<div<h1<ahref="#"">(2011-04-04<div<atarget="_blank"<div<footer<div<atarget="_blankhref="#">評(píng)論<ahref="javascript:;"onclick="returnfa<div<spanid="smore2"><ahref="#"target="_bl<div<h1<ahref="#""

<timedatetime="2011-04-04T00:25"pubdat(2011-04-04<div<atarget="_blank"<div <footer <div <atarget="_blankhref="#">評(píng)論 <ahref="javascript:;"onclick="returnfa<div<span<div<h1<ahref="#" ;MVC3書店--第四節(jié);"<div"店<div ; SQL EntityFrameworkcode-<footer<div<ahreftarget="_blank">閱讀<atarget="_blankhref>評(píng)論<ahref="javascript:;"onclick="returnfal<div<spanid="smore4"><ahref="#"target="_bla<footer<ul<liid="SG_pgontitle="當(dāng)前所在頁<lititle="跳轉(zhuǎn)至第2"><a<lititle="跳轉(zhuǎn)至第3"><a<lititle="跳轉(zhuǎn)至第4"><a<liid="SG_pgnexttitle="跳轉(zhuǎn)至第2頁<ahref="#">下一頁<liid="SG_pgttltitle="">4頁<divid="connFoot4">.2博客首頁的實(shí)現(xiàn)4.除了這個(gè)除了這個(gè)充當(dāng)容器的div外，代碼中的其他地方也使用了比較多的div元素來行的“</div這個(gè)結(jié)束標(biāo)記，用于結(jié)束代碼1-9中的id為“blogbodydiv 5.構(gòu) 1-191-111-<footer<p>:HTML5Web開&;&;Copyright2005All .3文章顯示頁面的實(shí)現(xiàn) 顯示的效果如圖1-20所示。 1-201-211-221-221-24的section1-231.1.3文章顯示頁面的實(shí)現(xiàn)1.1.3文章顯示頁面的實(shí)現(xiàn) 素字為用了一個(gè)header元素。在這個(gè)header元 另外，在標(biāo)題為“評(píng)論”的另外，在標(biāo)題為“評(píng)論”的section元素中，使用了一個(gè)Iframe最后，通過代碼1-12來了解顯示文章內(nèi)容與網(wǎng)友評(píng)論的section<div<section<header<span <ahref="javascript:;"onclick="window.CateDialog.showreturn<div<article<div<h1<ahref="#""

<imgtitle="此博文包含<timedatetime="2011-04-05T18:30" (2011-04-05<div<atarget="_blank"<divSQLServerExpress來作為我們的數(shù)據(jù)庫引擎。EntityFrameworkcode-objectrelationalmap）作。<p>&;&;&;EntityFramework4支持一種被稱ASP.NETMVC3時(shí)會(huì)同時(shí)自動(dòng)被安裝）來在本應(yīng)用程序中添“LibraryManager"子菜單下的“AddLibraryPackageReference"菜單選項(xiàng),<div<div<ahreftarget="_blank">閱<atarget="_blankhref="#">評(píng)論<ahref="javascript:;"onclick="returnfalse;<div <div <ul<li<div友<span2011-03-26<div->Library&;<li<div<span<ahref="#"<span2011-03-27<div<li<div友 <span 2011-03-31 <div { <div<span<p <li<div友 <span 2011-04-01 <div <div<span<li<div<span<ahref="#"<span2011-04-01 <div ;= ; <div<span2011-04-01 過程<div <iframem.jsp"width="90%"本節(jié)通過一個(gè)使用HTML5中各種結(jié)構(gòu)元素構(gòu)建企業(yè)的案例來講述如何使用HTML5圖1-26的首 HTML5的各種結(jié)構(gòu)元素來搭建這個(gè)首圖1-29首頁的網(wǎng)頁標(biāo)題部該部分被放置在一個(gè)header元素中。在企業(yè)中，通常將企業(yè)名稱、企業(yè)logo、整1-30.1首頁的實(shí)現(xiàn)。<imgid="imglogo1src="images/logo.jpgalt="常州藍(lán)博紡織機(jī)械h1 添加標(biāo)題，因此生成“1.UntitledSection1-13網(wǎng)頁標(biāo)題部分的完整代碼<!DOCTYPE<metacharset=utf-8<linkhref="main.css"type="text/css"<header<div<div<imgid="imglogo1"<div<divid="TopRight"><imgid="imglogo2"<map<areashape="rect"coords="32,5,93,21"<areashape="rect"coords="103,3,167,22"alt="常州藍(lán)博紡織機(jī)械"<ul<ahref="index.asp"><img</li><li><imgid="img_old1"src="images//<a></li><li><imgid="img_old2"src="images//<ahref="product.asp"><img

</li><li><imgid="img_old3"src="images//<ahref="news.asp"><img

</li><li><imgid="img_old4"src="images//<ahref="download.asp"><img

</li><li><imgid="img_old5"src="images//<ahref="gbook.asp"><img</li><li><imgid="img_old6"src="images//_13.jpg<ahref="contact.asp"><img

</li><li><imgid="img_old7"src="images//<a "><img</li><li><imgid="img_old8"src="images//_17.jpg<div<divid="Bottom1"><img<div /pub/shockwave/width="900"height="200"<paramname="movie"<paramname="quality"<paramname=wmode<embed<divid="Bottom2"><img 在這段代碼中，在nav元素內(nèi)部，使用了ul列表來顯示導(dǎo)航，為了避免在li列表項(xiàng)目元素的背景中使用的與之間存在裂痕，必須將前一個(gè)li元素的結(jié)束標(biāo)記</li>li元素的開始標(biāo)記<li>寫在同一行中，書寫成“</li><li>”的形式。另外，在樣式代碼中，需要使用如下的代碼，使li列表項(xiàng)目元素的項(xiàng)目編號(hào)不顯示，并且并排顯示。li{list-}該側(cè)邊欄部分的結(jié)構(gòu)圖如圖1-33所示。1-33nav元素，第二部分為該企業(yè)的聯(lián)系信息。由于直接使用ul列表元素直接顯示企業(yè)的聯(lián)系1-34nav元素生成的大綱該側(cè)邊欄元素的內(nèi)部代碼如代碼1-14所示。代碼1- 、 .1首頁的實(shí)現(xiàn)4.構(gòu)建主體內(nèi)容 <imgsrc="images/in_c2.gifid="section1_img1alt="公司動(dòng)態(tài)<imgsrc="images/in_c3.gif"id="section2_img2"alt="<imgsrc="images/in_c4.gifid="section3_img3alt="推薦產(chǎn) 代碼1- <section<div""<div<divid="div1"

<li2011年春節(jié)放假通知<li<li

<li2010紡織印染行業(yè)年會(huì)<li <li

<li<ahref="newsinfo.asp?id=42"class="path"><li <li

<li<li <li

<li<li <li<div <section<div<div<divid="div3"

<li <liid="li7">&;& 先進(jìn)節(jié)能環(huán)保技術(shù),通過我們的不斷努力,相繼開發(fā)出印染污水熱能<section<div""<div

<a<img

<a<img

<a<img

g"

<a<img.1首頁的實(shí)現(xiàn)在article元素內(nèi)部的第三個(gè)section元素中（“推薦產(chǎn)品”部分），使用了ul列表中嵌套u(yù)l列表的布局方式，外層ul列表中的li列表項(xiàng)目元素的排列方向?yàn)榭v向排列，內(nèi)層font-weight:font-size:color:line-height:font-family宋體9.article#mainsectiondisplay:-moz-display:-webkit-15.section#section3#bottomdiv3{display:-moz-display:-webkit--moz-box-align:24.section#section3#bottomdiv329.section#section3#bottomdiv3ul32.section#section3#bottomdiv3ullidisplay:-moz-display:-webkit-39.section#section3#bottomdiv3ulliul42.5.構(gòu)建信5.構(gòu)建信本部分代碼相對(duì)來說比較簡單，只需使用適當(dāng)?shù)膁iv元素，然后在其中放入 1-40的1-<articleid="main"<header><h1>您的位置：首頁>>們<divid="top"><imgid="img3"<divid="left"><imgid="img4"<div <li<imgid="img_1"<li><imgid="img_line1"<imgid="img_2"&;<li><imgid="img_line2"生<li><imgid="img_line3"<imgid="img_4"&;<li><imgid="img_line4"<imgid="img_5"<li><imgid="img_line5"本中其他幾個(gè)主要頁面的整體結(jié)構(gòu)均與這個(gè)頁面的整體結(jié)構(gòu)大致相同，只不過本章通過利用HTML5制作的一個(gè)博客與一個(gè)企業(yè)，重點(diǎn)闡述了如何使用HTML5HTML5中的結(jié)構(gòu)元素以及使用這些結(jié)構(gòu)元素所制作出來的網(wǎng)頁大綱有一個(gè)比較詳細(xì)的了解，能夠利用這些結(jié)構(gòu)元素與網(wǎng)頁大綱的知識(shí)制作出屬于自己的HTML5。下一章將通過兩個(gè)案例來闡述如何使用HTML5Web應(yīng)用程正確獲取用戶在HTML5中新增表單元素中輸入的內(nèi)容并將其保存在數(shù)據(jù)庫中。4：綜HTML5、jQueryASP.NETWeb應(yīng)用程序本章通過兩個(gè)案例來介紹如何在Web表單中使用HTML5的新增結(jié)構(gòu)元素和新增表單元HTML5HTML5、CSS3jQuery制作的比較典型的WebHTML5CSS3jQuery以及ASP.NET服務(wù)器端 中。該頁面使用一個(gè)目前在Web 或Web應(yīng)用廣泛使用的、使用jQuery 案例3：用結(jié)構(gòu)元素制作Web應(yīng)用程序中的菜 單。該Web應(yīng)用程序在瀏覽器中的總體效果如圖2-1所示。2-32-4所示，再次單擊該主菜單項(xiàng)時(shí)其子菜單項(xiàng)會(huì)被隱藏。些菜單視為一個(gè)組，并將其放置在nav元素中。在nav元素中，再由ul列表元素及其li列表項(xiàng)目元素來具體顯示每一個(gè)菜單項(xiàng)。代碼2-1菜單頁面的HTML5代<body<nav<li

<a <a

<a

<a <a <a .2代碼剖析2-2菜單頁面所使用的樣式代碼<stylebody58.navul63.navulli68.navul72.navulliul76.ulliulfont-size:color:text-align:}ulliullifont-size:color:89.90.2-3菜單頁面中使用到的function{}function{}function{}4：綜合運(yùn)用HTML5、jQueryASP.NET構(gòu)建Web在本案例中，制作Web應(yīng)用程序中的一個(gè)數(shù)據(jù)輸入頁面。該頁面主要在企業(yè)內(nèi)部的Web表單中輸入一條數(shù)據(jù)，然后單擊追加按鈕，該數(shù)據(jù)將會(huì)在頁面下2.2.2頁面顯示效果2.2.2頁面顯示效果（點(diǎn)擊查看大圖）2-52-8訂單輸入頁面的結(jié)構(gòu)圖 （ 容進(jìn)行驗(yàn)證，當(dāng)驗(yàn)證沒通過時(shí)給出具有懸浮效果的驗(yàn)證錯(cuò)誤提示信息，如圖2-9所示。jQuery驗(yàn)證插件，因此當(dāng)用戶提交表單時(shí)，會(huì)對(duì)表單中所有元素進(jìn)行驗(yàn)證。當(dāng)驗(yàn)證沒有通過時(shí)，給出具有懸浮效果的驗(yàn)證錯(cuò)誤提示信息，如“2.2.2頁面顯示效果”中的圖2-6所示。規(guī)則的js文件，內(nèi)置基本驗(yàn)證規(guī)則）（文件夾）\formValidator.2.1\css\validationEngine.jquery.css（驗(yàn)證插件所使用的樣式$(function() 們?yōu)樗砑恿巳缦碌腸lass屬性。<inputtype="text"id="tbxCode"name="tbxCode"maxlength="8" ]]] minSize：該元素中至少必須輸入的字符數(shù)。maxSize：該元素中最多允許輸入的字符數(shù)。min：該元素max：該元素中輸入的數(shù)值必須小于等于指定數(shù)值。past：該元素中輸入的執(zhí)行ajax提交，驗(yàn)證用戶名是否有效。ajax提交，驗(yàn)證用戶名是否有效?？筛鶕?jù)文件類型修改這個(gè)驗(yàn)證規(guī)則的驗(yàn)證名，例如，向asp文件執(zhí)行ajax提交時(shí)，可改成ajaxUserCallAsp。ajaxNameCallPhpfileajax提件執(zhí)行ajax提交時(shí)，可改成ajaxNameCallAsp。<inputtype="text"id="userName"name="userName"maxlength="20"/*file屬性值為提交的文件，插件會(huì)提交三個(gè)參數(shù)："alertTextOk":"*Thisusernameisavailable","alertTextLoad":"*Loading,pleasewait","alertText":"*Thisusernameisalreadytaken"}，必須返回固定格式的json數(shù)據(jù)。提供的作為示例的php文件內(nèi)容如代碼2-代碼2- /*$validateError="Thisusernameisalready/*==" // //echo //返回成功時(shí)的json}{ f($x==990000){echojson_encode($arrayToJs);//返回失敗時(shí)的json}}}$(function()//inlineValidation:truesuccess:false,$(function()success:false,$(function()"success:false,由于從官方網(wǎng)站上下載的壓縮包中的驗(yàn)證錯(cuò)誤提示信息文件［在（文件夾）\加中文版的驗(yàn)證錯(cuò)誤提示信息文件。筆者添加的中文版驗(yàn)證錯(cuò)誤提示信息文件如代碼2-5所示。代碼2- {newLang:"required"regex":"alertText":"*必須輸入內(nèi)容","alertTextCheckboxMultiple"*必須選擇一個(gè)選項(xiàng)","alertTextCheckboxe":"*必須為選取狀態(tài)""regex":"alertText"*","alertText2":"個(gè)字符""regex":"alertText"*","alertText2":"個(gè)字符""regex":"alertText"*"max":"regex":"alertText"*"past":"regex":"alertText"*"future":"regex":"alertText"*{"alertText"*超出允許選取的項(xiàng)目個(gè)數(shù){"alertText"*","alertText2":"個(gè)選項(xiàng)""equals":"regex":"alertText"*輸入的內(nèi)容不一致"phone":"alertText":"*請(qǐng)輸入有效的"":{"alertText"*請(qǐng)輸入有效的郵件地址"regex":/^[\-\+]?\d+$/,"alertText"*請(qǐng)輸入一個(gè)整數(shù)""number":"alertText"*請(qǐng)輸入一個(gè)數(shù)值"date":"ipv4":"url":"alertText":"*請(qǐng)輸入一個(gè)有效的"{"regex":/^[0-9\]+$/,"alertText"*只能輸入數(shù)字"regex":/^[a-zA-Z\\']+$/,"alertText"*只能輸入字母""onlyLetterNumber":{"alertText"*只能輸入數(shù)字或字母"url":"ajaxValidateFieldUser","extraData":"name=eric","alertText"*用戶名已被使用","alertTextLoad"*正在驗(yàn)證，請(qǐng)稍候"extraData":"name=eric","alertTextOk":"*用戶名有效","alertText":"**用戶名已被使用","alertTextLoad"*正在驗(yàn)證，請(qǐng)稍候""url":"ajaxValidateFieldName","alertText":"*這個(gè)名字已被使用","alertTextOk":"*這個(gè)名字可以使用","alertTextLoad"*正在驗(yàn)證，請(qǐng)稍候""alertText":"*這個(gè)名字已被使用","alertTextLoad":"*正在驗(yàn)證，請(qǐng)稍候""alertText":"*請(qǐng)輸入}}.4代碼剖析1.HTML5HTML5HTML5section2-1頁面中所有控件的信息該頁面中的HTML5頁面代碼如代碼2-6所示代碼2- 頁面中的HTML5頁面代<%@PageTitle="訂單信息Language="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="HTML5TEST.Default"%><body<form

<li<inputtype="text"id="tbxCode"name="tbxCode" <li<inputtype="date"id="tbxDate"name="tbxDate" <li<li<inputtype="text" <li<label<li <li<li<inputtype="number"id="tbxNum"name="tbxNum"maxlength="6"value="0"<li<li<inputtype="textid="tbxPricename="tbxPrice"maxlength="6"value="0"

<li<label<li <li<li<inputtype="text"id="tbxName"<li<labelfor="tbx"><li"<inputtype=""id="tbx"name="tbxmaxlength="20"class="validate[optional,custom[ "

<div <asp:ButtonID="btnAdd" <asp:ButtonID="btnUpdate" <asp:ButtonID="btnDelete" <asp:ButtonID="btnClear" runat="serverText="清除"Enabled=false<divPageSize="10" <asp:BoundColumnDataField="orderDate"<asp:BoundColumnDataField="goodsCode" Text="編輯"/><PagerStyleHorizontalAlign="Right"Width="100%"橫向布局，每行顯示三個(gè)label與三個(gè)TextBox文本框，外層的ul列表用于豎向布局，將內(nèi)層的ul列表進(jìn)行豎向排列。這兩個(gè)ul列表的樣式代碼如下所示。display:-moz-box;}ullidisplay:-moz-box;}}liHTML代碼，表單中所有放置標(biāo)liid都是以“titleliid<li<inputtype="text"name="tbxCode"id="tbxCode"maxlength="8"font-size:12px;color:}}}}font-size:12px;width:68px;height:20px;cursor:hand; color:white;}font-size:12px;width:68px;height:20px;cursor:hand; color:white;}}nth-child(even)選擇器與nth-child(odd)選擇器分別控制一覽表中nth-child(1)選擇器單獨(dú)控制標(biāo)題行的背景div#infoTabletabletr:nth-color:} tabletr:nth-color:} tabletr:nth-child(1){background-} child(1){width:15%;}代碼2- body{}}}}

margin-left:0px;display:-moz-box;ullidisplay:-moz-box;}font-size:14px;font-weight:bold;}font-size:12px;color:}}color:}width:95%;border-top-color:#426C7C;border-right-color:#CCCCCC;border-left-color:#426C7C;border-width:1px;height:18px;}}}}}}}}}font-size:12px;width:68px;height:20px;cursor:hand; color:white;}}divfont-size:12px;text-align:center;}divtablecolor:#FFFFFF;}divtable}div#infoTabletabletr:nth-color:} tabletr:nth-color:} tabletr:nth-child(1){background-} child(1){width:15%;} <inputtype="text"id="tbxCode"name="tbxCode"maxlength="8" <inputtype="date"id="tbxDate"name="tbxDate"maxlength="10" <inputtype="text" class="validate[required]"placeholder="必須輸入商品編號(hào)" <inputtype="number"id="tbxNum"name="tbxNum"maxlength="6"value="0"<inputtype="text"id="tbxPrice"name="tbxPrice"maxlength="6"value="0"<inputtype=""id="tbx"name="tbx"maxlength="20"的JavaScript函數(shù)，它們的功能是當(dāng)數(shù)量文本框或單價(jià)文本框失去焦點(diǎn)時(shí)將金額文本框中的目前該頁面中的JavaScript代碼如代碼2-8所示。代碼2-8 頁面中的JavaScript代碼type="text/css"media="screen"/><scriptsrc="Scripts/jquery.va $(function()varnum=parseInt($("#tbxNum").val());varprice=parseFloat($("#tbxPrice").val());if(isNaN(num*price)

varnum=parseInt($("#tbxNum").val());varprice=parseFloat($("#tbxPrice").val());if(isNaN(num*price))

<inputtype="date"id="tbxDate"name="tbxDate"maxlength="10" <inputtype="number"id="tbxNum"name="tbxNum"maxlength="6"value="0"<inputtype=""id="tbx"name="tbx"maxlength="20" 對(duì)于這些元素，在目前版本的ASP.NET服務(wù)器端控件中，沒有與之相對(duì)應(yīng)的服務(wù)器端runat的屬性值設(shè)為server的方法呢？<inputtype="date"id="tbxDate"name="tbxDate"maxlength="10" required<inputtype="numberid="tbxNumname="tbxNummaxlength="6value="0"class="validate[required,custom[integerplaceholder="必須輸入一個(gè)整數(shù)值"<inputtype=""id="tbx"name="tbx"maxlength="20"runatserver，然后在瀏覽器中運(yùn)行該頁面，瀏覽器顯示一個(gè)報(bào)錯(cuò)頁面，如圖2-10所示。值設(shè)為server后，ASP.NET服務(wù)器會(huì)將這幾個(gè)元素視為服務(wù)器端控件，而在目前版本的ASP.NET中，是沒有這幾個(gè)服務(wù)器端控件的。<inputtype="date"id="tbxDate"name="tbxDate"maxlength="10"placeholder="必須輸入一個(gè)有效的日期"required（點(diǎn)擊查看大圖（點(diǎn)擊查看大圖圖2- 將HTML5中新增元素的runat屬性值設(shè)為 {{}}圖2-11所示。 stringSqlStr="insertintoorders";SqlStr+="values('";+//SqlStr語句中添加dateSqlStr+=SqlStr+="'"http://SqlStr語句中添加numberSqlStr+=Request.Form["tbxPrice"].ToString()+",";SqlStr+="'"+//向SqlStr語句中添加元素的輸入SqlStr+=SuccessFlag=此外還有一點(diǎn)需要補(bǔ)充，因?yàn)轫撁嬷懈魑谋究蚩丶苯邮褂昧丝蛻舳嗽兀╥nput元素，publicpartialclassDefault:{publicstringCode;publicstringdate;publicstringGoodsCode;publicstringbrandName;publicstringnum="0";publicstringprice="0";publicstringmoney="0";publicstringName;publicstring{if{this.Code=Request.Form["tbxCode"].ToString();this.date=Request.Form["tbxDate"].ToString();this.GoodsCode=Request.Form["tbxGoodsCode"].ToString();this.brandName=Request.Form["tbxBrandName"].ToString();this.num=Request.Form["tbxNum"].ToString();this.price=doubletemp=double.Parse(this.num)*double.Parse(this.price);this.money=Math.Round(temp,2).ToString();this.Name=Request.Form["tbxName"].ToString();this.=Request.Form["tbx"].ToString();}}} 然后在JavaScript代碼中，在裝載頁面時(shí)將表單中的各元素內(nèi)容設(shè)為提交前保存在服務(wù)$(function()按鈕以及對(duì)一覽表執(zhí)行某個(gè)動(dòng)作后服務(wù)器端所應(yīng)執(zhí)行的處理，如表2-2所示。 <addname="dbConnection"connectionString="DataSource=lln\sqlexpress;providerName="System.Data.SqlClient"/>下面來看一下該頁面完整的ASP.NET服務(wù)器端代碼，如代碼2-9所示。代碼2-9 頁面中完整的ASP.NET服務(wù)器端代碼usingusingSystem.Linq;usingSystem.Web;usingSystem.Configuration;usingnamespaceHTML5TEST{publicpartialclassDefault:{privateSystem.Data.SqlClient.SqlConnectionSqlCon;privateSystem.Data.SqlClient.SqlDataAdapterDataAdapter;privateSystem.Dat mandCommand;privateintmyErrorNumber=0;//數(shù)據(jù)庫返回的錯(cuò)誤號(hào)publicstringCode;publicstringpublicstringGoodsCode;publicstringbrandName;publicstringnum="0";publicstringprice="0";publicstringmoney="0";publicstringName;public publicboolcodeRead=false;{this.SqlCon=newSystem.Data.SqlClient.SqlConnection();this.SqlCon.ConnectionString=Constr;if(SuccessFlag==false){}{}

//從數(shù)據(jù)庫中所有訂單數(shù)據(jù)，裝入一覽表this.datatable.DataSourceCreateDataSource();if{this.Code=Request.Form["tbxCode"].ToString();this.date=Request.Form["tbxDate"].ToString();this.GoodsCode=Request.Form["tbxGoodsCode"].ToString();this.brandName=Request.Form["tbxBrandName"].ToString();this.num=Request.Form["tbxNum"].ToString();this.price=doubletemp;this.money=Math.Round(temp,2).ToString(); }}{this.datatable.SelectedIndex=-1;this.btnDelete.Enabled=false;//刪除按鈕變?yōu)閱螕魻顟B(tài)this.btnClear.Enabled=false;//清除按鈕變?yōu)閱螕魻顟B(tài)this.btnAdd.Enabled=true;//追加按鈕變?yōu)樵试S單擊狀態(tài)}{DataSetds;SqlStr="selectcount(*)countfromorderswhere+strFormat(Request.Form["tbxCode"].ToString())+"'";ds=this.GetDataFromDB(SqlStr);if(ds=={}{}SqlStr="insertintoorders";SqlStr+="values('"+strFormat(Request.Form["tbxCode"].ToString())+"',";SqlStr+="'"+Request.Form["tbxDate"].ToString()+"',";SqlStr+=SqlStr+="'"SqlStr+=Request.Form["tbxNum"].ToString()+",";SqlStr+=Request.Form["tbxPrice"].ToString()+",";SqlStr+="'"SqlStr+="'"+strFormat(Request.Form["tbx SuccessFlag=this.ExecSingleSql(SqlStr);{}{this.codeRead=true;//訂單編號(hào)文本框變?yōu)橹蛔x狀態(tài)this.btnDelete.Enabledtrue;//刪除按鈕變?yōu)樵试S單擊狀態(tài)this.btnClear.Enabled=true;//清除按鈕變?yōu)樵试S單擊狀態(tài)this.btnAdd.Enabled=false;//追加按鈕變?yōu)閱螕魻顟B(tài)this.datatable.DataSourceCreateDataSource();}}{stringSqlStr="updateorders";SqlStr+="goodsCode='"+strFormat(Request.Form["tbxGoodsCode"].ToString())+"',";SqlStr+="brandName='"+strFormat(Request.Form["tbxBrandName"].ToString())+"',";SqlStr+="num="+Request.Form["tbxNum"].ToString()+",";SqlStr+="price="+Request.Form["tbxPrice"].ToString()+",";SqlStr+=" + SqlStr+="+strFormat(Request.Form["tbx SqlStr+="wherecode='"+strFormat(Request.Form["tbxCode"].ToString())+"'";SuccessFlag=this.ExecSingleSql(SqlStr);{}{=this.datatable.DataSourceCreateDataSource();}}{stringSqlStr;SqlStr="deletefromorders";SqlStr+="wherecode='"+strFormat(Request.Form["tbxCode"].ToString())+"'";SuccessFlag=this.ExecSingleSql(SqlStr);{}{=this.datatable.SelectedIndex=-1;this.Code=string.Empty;//清除訂單編號(hào)文本框中的內(nèi)容this.btnUpdate.Enabled=false;//修改按鈕變?yōu)閱螕魻顟B(tài)this.btnDelete.Enabled=false;//刪除按鈕變?yōu)閱螕魻顟B(tài)=}}{this.codeRead=true;}protectedvoid mandEventArgse){if mandName=={this.Code=e.Item.Cells[0].Text;this.date=e.Item.Cells[1].Text;if(e.Item.Cells[3].Text=="")this.brandName=this.brandName=this.num=e.Item.Cells[4].Text;doublenum=double.Parse(this.num);doublepricedouble.Parse(this.price);doubletemp=num*price;this.money=Math.Round(temp,2).ToString();if(e.Item.Cells[7].Text=="") Name=this.Name=this.="";this.=this.codeRead=true;//訂單編號(hào)文本框變?yōu)橹蛔x狀態(tài)=this.btnClear.Enabledtrue;//清除按鈕變?yōu)樵试S單擊狀態(tài)this.btnAdd.Enabledfalse;//追加按鈕變?yōu)樵试S單擊狀態(tài)}}protectedvoiddatatable_PageIndexChanged(objectsource,DataGridPageChangedEventArgse){this.datatable.CurrentPageIndex=e.Ne this.datatable.DataSource=CreateDataSource();}privatevoiddataInit(){this.date=string.Empty;this.brandName=string.Empty;this.num="0";this.price=this.money= this.=}privatebool{{}

returntrue;{this.myErrorNumber=e.Number;returnfalse;}catch(Exception{this.myErrorMessage=e.Message;returnfalse;}}{stringstrErrMsg;strErrMsg=this.myErrorNumber+":"+strErrMsg="<scriptlanguage='JavaScript'>alert('"+strErrMsg+}{DataSetds;DataTabledt=newDataTable();DataRowdr;doubledt.Columns.Add(newD olumn("code"));dt.Columns.Add(newD olumn("orderDate"));dt.Columns.Add(newD olumn("goodsCode"));dt.Columns.Add(newD olumn("brandName"));dt.Columns.Add(newD olumn("num"));dt.Columns.Add(newD olumn("price"));dt.Columns.Add(newD olumn("money"));dt.Columns.Add(newD dt.Columns.Add(newD olumn(""));SqlStr="select*fromordersorderbycode";ds=this.GetDataFromDB(SqlStr);if(ds=={dv=null;dt=null;return}for(inti=0;i<ds.Tables[0].Rows.Count;{dr=dr[0]=dr[2]=ds.Tables[0].Rows[i]["goodsCode"].ToString();dr[3]=dr[4]=dr[5]=temp=dr[6]=Math.Round(temp,2).ToString();dr[8]=ds.Tables[0].Rows[i][" }dv=newDataView(dt);returndv;}{{ds=newthis.DataAdapter=newSqlDataAdapter(SqlStr,returnds;}{this.myErrorNumber=e.Number;returnnull;}catch(Exception{this.myErrorMessage=e.Message;returnnull;}}{{}

mand=new returntrue;{this.myErrorNumber=e.Number;returnfalse;}catch(Exception{this.myErrorMessage=e.Message;returnfalse;}}{return}}}} codeRead變量來控制訂單編號(hào)文本框的只讀狀態(tài)，當(dāng)表單處于修改或刪除數(shù)據(jù)狀態(tài)時(shí)該變量為True，訂單編號(hào)文本框?yàn)橹蛔x狀態(tài)，當(dāng)表單處于新<%{<%現(xiàn)在該頁面的完整JavaScript代碼如代碼2-10所示。代碼2-10頁面的完整JavaScript代碼type="text/css"media="screen"/><scriptsrc="Scripts/jquery.va $(function()<%{<%varnum=parseInt($("#tbxNum").val());if(isNaN(num*price))

$("#tbxMoney").val(Math.round(num*price*100,0)/varnum=parseInt($("#tbxNum").val());if

$("#tbxMoney").val(Math.round(num*price*100,0)/2.3本章小結(jié)本章首先通過一個(gè)利用HTML5中的結(jié)構(gòu)元素制作Web應(yīng)用程序中的菜單的案例來闡述HTML5的結(jié)構(gòu)元素和表單元素、jQueryASP.NET制作HTML5Web用程序的案例來闡述如何使用HTML5中的結(jié)構(gòu)元素搭建Web應(yīng)用程序的框架結(jié)構(gòu)，如何對(duì)下一章將通過一些案例來闡述如何HTML5canvas素與CanvasAPI在頁面上繪制圖形、圖像及動(dòng)畫，以及如何利用CanvasAPIWeb頁面上的小游戲。3canvas元素繪制圖形、圖像與動(dòng)畫案例7：使用canvas元素制作簡單小游戲9：用動(dòng)畫的形式裝載圖像canvas元素在網(wǎng)頁上進(jìn)行圖形、圖像與動(dòng)畫繪制的案例，玫瑰線。當(dāng)然，n值不同，繪制出的玫瑰線的形狀也不相同。節(jié)將向讀者介紹如何使用HTML5中的canvas元素的圖形繪制功能，在網(wǎng)頁中繪 荷花”選項(xiàng)，單擊繪制按鈕，頁面顯示效果如圖3-3所示。 （點(diǎn)擊查看大圖）（點(diǎn)擊查看大圖）3-4canvasCanvasAPI中全部屬性與方法的全面介紹，可以查看筆者所著的《HTML5與CSS3權(quán)canvas元素，并將其保存到某個(gè)變量中（canvas即在大多數(shù)程序中進(jìn)行圖形繪制時(shí)，都需要使用圖形上下文（graphicscontext）對(duì)象。圖形上canvas元素進(jìn)行圖形繪制時(shí)，需要使用canvas對(duì)象的getContext方法來獲得圖形上下文對(duì)象，方法如下所示。canvas元素進(jìn)行圖形或圖像的繪制時(shí)，當(dāng)需要對(duì)當(dāng)前所繪制的圖形或圖像執(zhí)行以下 該方法使用四個(gè)參數(shù)：x是指定的矩形區(qū)域起點(diǎn)的橫坐標(biāo)；y是指定的矩形區(qū)域起點(diǎn)的縱坐canvas畫布的左上角，width是指定的矩形區(qū)域的長度，height是指定的矩因此在繪制前需要使用這個(gè)函數(shù)擦除之前利用canvas元素繪制好的圖形。translate方法有兩個(gè)參數(shù)，x表示將坐標(biāo)軸原點(diǎn)向左移動(dòng)多少個(gè)單位，默認(rèn)單位為像素；y的繪制。使用圖形上下文對(duì)象的beginPath方法開始路徑的創(chuàng)建工作，代碼如下所示。（style直線后，光標(biāo)自動(dòng)移動(dòng)到lineTo方法的參數(shù)所指定的直線終點(diǎn)?；騭troke方法（繪制圖形邊框）執(zhí)行的。，代碼剖析 案例頁面的HTML5頁面代碼如代碼3-1所示。代碼3-1 案例頁面的HTML5頁面代碼<script<select"代碼3- 案例的完整JavaScript代碼（左邊的數(shù)字表示行號(hào)<scriptvar{varvarvarvarvar for(var{ {var{casecasecase 代碼剖析 變量代表畫面中canvas元素的圖形上下文對(duì)象，A變量被用來控制花朵的半徑長度（半徑程式來計(jì)算半徑長度。另外，在本案例中，n變量將被賦值為10，表示繪制20片花瓣。在代碼中，從第331btn_onclick標(biāo)單擊繪制按鈕時(shí)將調(diào)用該函數(shù)在canvas元素中進(jìn)行花朵的繪制。從第5行開始到第9行結(jié)束的代碼，定義了本函數(shù)中使用的變量。其中變量canvas代表案例頁面中的canvas元素，變量width與height表示canvas元素的寬度與高度，Xo為canvas元素的寬度值的一半，Yo為canvas元素的高度值的一半，由這兩個(gè)變量所構(gòu)成的坐標(biāo)點(diǎn)即為canvask代表用戶在花類型選擇框中所選項(xiàng)的value值，繪制蓬萊菊時(shí)該值為1，繪制令箭荷花時(shí)該值為2，繪制大麗花時(shí)該值為3。在第10行開始到第20行結(jié)束的代碼中，分別取得了頁面中的canvas元素并保存在變量canvas中，取得canvas元素的寬度與高度并保存在變量width與變量height中，取得kr=Asin(nBA前繪制的花朵擦除。在代碼第23行中，將繪制圖形的坐標(biāo)原點(diǎn)移動(dòng)到canvas元素 樣才可能以canvas元素的中心點(diǎn)為花朵的中心點(diǎn)進(jìn)行花朵繪制。從第24行開始到第30行結(jié)束的代碼先創(chuàng)建圖形路徑，使方程式ASin(nB)中的另一個(gè)參數(shù)B在從0開始到2結(jié)束的范圍內(nèi)進(jìn)行變動(dòng)，每次將B增加0.01，并在變動(dòng)過程中循環(huán)調(diào)用draw函數(shù)進(jìn)行花朵繪制。在代碼中，從第32行開始到第55行結(jié)束的代碼為draw函數(shù)。當(dāng)用戶用鼠標(biāo)單擊繪制按鈕后，該函數(shù)接受一個(gè)參數(shù)B，在btn_onclick函數(shù)中使方程式ASin(nB)中的另一個(gè)參數(shù)B在從0開始到2π結(jié)束的范圍內(nèi)進(jìn)行變動(dòng)，在這個(gè)變動(dòng)過程中，會(huì)循環(huán)調(diào)用draw函數(shù)進(jìn)行花朵繪制，并把每一個(gè)處于變動(dòng)狀態(tài)的參數(shù)Bdraw為10，表示繪制20片花瓣。接下來，在第35行到第45行代碼中，根據(jù)用戶所選擇的花的類型，使用不同的方程式來計(jì)算花朵半徑的長度。在第4748行代碼中，將r*Math.cos(Br*Math.sin(B)計(jì)算式的計(jì)算結(jié)果分別保存在變量x與變量y中。在第50行到第54行代碼中，在當(dāng)前坐標(biāo)點(diǎn)與（-x,-y）坐標(biāo)點(diǎn)之間繪制一條直線，同時(shí)這樣，通過不斷變動(dòng)參數(shù)B值來繪制直線，最終實(shí)現(xiàn)了花朵的繪制。canvas元素繪制圖形動(dòng)畫的案例，該案例將繪制一個(gè)時(shí)鐘，該時(shí)鐘可1秒鐘該時(shí)鐘的秒針會(huì)自動(dòng)更3-5canvasCanvasAPI的屬性與方法之外，還使用了以下屬性與CanvasAPI中，繪制半徑與弧形時(shí)指定的參數(shù)為開始弧度與結(jié)束弧度，如果習(xí)慣使用角var可以直接使用canvasfontcanvas元素中繪制文字時(shí)context.fontbold16px宋體CanvasAPICanvasAPIcanvasmeasureText方法來得到某個(gè)指定measureText方法接受一個(gè)參數(shù)text，該參數(shù)為需要指定的字符串，該方法返回一個(gè)在CanvasAPI中,canvas元素的圖形上下文對(duì)象的fillText方法或strokeText方法來繪制文字。其中fillText方法以填充方式繪制字符串，代碼如下所示。divdivh1元素，在canvasdivcanvas元素進(jìn)行樣式的指定。該案例的HTML頁面代碼與樣式代碼如代碼3-3所示。代碼3- <script??代碼稍后介紹display:-moz-box;-webkit-box-pack:center;}}<body<div><h1>使用canvas元素繪制指針式動(dòng)畫時(shí)鐘 代碼3- 案例的完整的JavaScript代<scriptvarvar{ {varradius=Math.min(canvas.width/2,canvas.height/2)-varvarvarr=radius-context.fontbold16px宋體Drawtext('1',centerx+(0.5*r),centery-(0.88*Drawtext('2',centerx+(0.866*r),centery-(0.5*Drawtext('3',centerx+radius-Drawtext('4',centerx+(0.866*r),centery+(0.5*Drawtext('5',centerx+(0.5*r),centery+(0.866*Drawtext('6',centerx,centery+Drawtext('7',centerx-(0.5*r),centery+(0.866*Drawtext('8',centerx-(0.866*r),centery+(0.49*Drawtext('9',centerx-radius+10,Drawtext('10',centerx-(0.866*r),centery-(0.50*Drawtext('11',centerx-(0.51*r),centery-(0.88*vardate=newvarh=varm=varvara=((h/12)*Math.PI*2)-1.57+