亚洲免费av电影一区二区三区,日韩爱爱视频,51精品视频一区二区三区,91视频爱爱,日韩欧美在线播放视频,中文字幕少妇AV,亚洲电影中文字幕,久久久久亚洲av成人网址,久久综合视频网站,国产在线不卡免费播放

        ?

        HTML5網(wǎng)頁電子畫板的設(shè)計與實(shí)現(xiàn)

        2012-08-22 02:58:42李伙欽
        科技視界 2012年2期
        關(guān)鍵詞:畫板鼠標(biāo)矩形

        李伙欽

        (福建船政交通職業(yè)學(xué)院信息工程系 福建 福州 350007)

        0 引言

        隨著信息技術(shù)的迅猛發(fā)展,上網(wǎng)已成為很多人生活中必不可少的一部分,人們通過網(wǎng)站獲取資訊,下載影音,社交通信等,其得益于HTML的標(biāo)準(zhǔn)化,網(wǎng)頁可以無障礙的在各種平臺各種操作系統(tǒng)上運(yùn)行。上一版本的HTML標(biāo)準(zhǔn)是2001的XHTML1.1標(biāo)準(zhǔn),十幾年來一直沒有更新,漸漸跟不上用戶的需求了。最新的HTML5標(biāo)準(zhǔn)應(yīng)運(yùn)而生,為我們帶來了強(qiáng)大的用于交互、多媒體和本地化等方面的標(biāo)簽以及應(yīng)用編程接口。

        HTML5一個非常實(shí)用的特性是用于繪畫的Canvas元素,Canvas擁有多種繪制路徑、矩形、圓形、字符以及圖像處理的方法,為網(wǎng)頁繪圖及圖像處理帶來了便捷。

        本文介紹了HTML5的特性及Canvas元素的相關(guān)概念,然后介紹采用Canvas制作網(wǎng)頁電子畫板的設(shè)計思路,分析其設(shè)計步驟及注意事項(xiàng)。

        本文的組織結(jié)構(gòu),第一章介紹HTML5概念,第二章介紹設(shè)計總體思路,第三章介紹詳細(xì)設(shè)計,最后總結(jié)。

        1 第一章 相關(guān)技術(shù)

        1.1 HTML5

        HTML標(biāo)準(zhǔn)自1999年12月發(fā)布的HTML 4.01后,后繼的 HTML 5和其它標(biāo)準(zhǔn)被束之高閣,為了推動web標(biāo)準(zhǔn)化運(yùn)動的發(fā)展,一些公司聯(lián)合起來,成立了一個叫做WHATWG (Web超文本應(yīng)用技術(shù)工作組)的組織,HTML5草案的前身名為Web Applications 1.0,于 2004年被 WHATWG提出,于 2007年被W3C接納,并成立了新的 HTML工作團(tuán)隊(duì)。HTML 5的第一份正式草案已于2008年1月22日公布。HTML 5有兩大特點(diǎn):首先,強(qiáng)化了 Web網(wǎng)頁的表現(xiàn)性能。其次,追加了本地數(shù)據(jù)庫等Web應(yīng)用的功能。

        HTML5中的一些有趣的新特性:

        1.1.1 用于繪畫的 canvas元素

        1.1.2 用于媒介回放的 video和 audio元素

        1.1.3 對本地離線存儲的更好的支持

        1.1.4 新的特殊內(nèi)容元素,比如 article、footer、header、nav、section

        1.1.5 新的表單控件, 比如 calendar、date、time、email、url、search

        1.2 Canvas

        HTML5定義了<canvas>元素作為位圖畫布在瀏覽器中的相關(guān)解決方案,它用于渲染圖形,游戲圖像或者其他飛行中的視覺圖形。一個Canvas代表了頁面中的一個矩形區(qū)域,在這個區(qū)域里面,你可以用Javascript來畫你想畫的任何東西。HTML5定義了一系列的方法用來畫圖形,定位路徑,創(chuàng)建漸變以及將圖形變形。

        HTML5 Canvas的功能讓人自然聯(lián)想到Flash,同樣用來繪制圖像和動畫,F(xiàn)lash目前的產(chǎn)品成熟度和用戶接受度都是很高的,F(xiàn)lash無論是在矢量圖還是位圖的繪制上效率都略高于HTML5 Canvas。HTML5 Canvas的優(yōu)勢主要在無須另外安裝插件即可播放,與網(wǎng)頁其他元素的容易融合協(xié)作。

        2 第二章 設(shè)計總體思路

        網(wǎng)頁電子畫板主要用于涂鴉、繪畫、對圖像網(wǎng)頁進(jìn)行標(biāo)注等,總體思路是網(wǎng)頁中設(shè)置一個div層,在該層中添加Canvas元素作為畫板,然后添加幾個繪畫工具按鈕(如畫筆、直線、圓、矩形、取色板、線條大小)。

        按下畫筆按鈕是自由繪畫狀態(tài),可以用鼠標(biāo)自由繪畫;按下直線、圓、矩形按鈕繪制相應(yīng)的圖像;按下取色板彈出一個浮動層,該浮動層中也包含一個Canvas元素,繪制出取色板的各種顏色,通過點(diǎn)擊取色板區(qū)域獲取顏色值;按下線條大小按鈕,彈出一個浮動層,該浮動層中包含一個下拉菜單,用于設(shè)置線條的粗細(xì)值。

        為了實(shí)現(xiàn)對圖像網(wǎng)頁等進(jìn)行批注,將畫板所在的層也設(shè)置成浮動層,然后在網(wǎng)頁中添加一個iframe元素和文本框,在文本框中輸入網(wǎng)址或者本地圖像地址,通過Javascript動態(tài)設(shè)置iframe的src屬性,實(shí)現(xiàn)圖像和網(wǎng)址的動態(tài)載入。畫板漂浮在iframe之上,這樣就可以對圖像或者網(wǎng)頁進(jìn)行批注了。

        對于圖像的保存,將每筆繪畫的參數(shù)都記錄下來,然后通過Ajax提交到服務(wù)器上。

        3 第三章 詳細(xì)設(shè)計

        3.1 創(chuàng)建畫布

        <canvas id="canvas"width="200"height="100"></canvas>

        3.2 自由繪畫

        鼠標(biāo)按下(mousedown事件)開始繪畫,線條跟隨鼠標(biāo)坐標(biāo)移動,鼠標(biāo)彈起(mouseup事件)結(jié)束繪畫。繪畫核心Javascript代碼如下:

        3.3 繪制直線

        與自由繪畫類似,區(qū)別在于自由繪畫是線條跟隨鼠標(biāo)移動,而畫直線在鼠標(biāo)按下時獲取起始點(diǎn)坐標(biāo),鼠標(biāo)移動過程中不進(jìn)行繪畫,等到鼠標(biāo)彈起時獲取目標(biāo)點(diǎn)坐標(biāo),然后才根據(jù)這兩個點(diǎn)繪制直線。代碼與自由繪畫的核心代碼一樣。

        3.4 繪制圓

        畫圓在鼠標(biāo)按下時獲取圓點(diǎn)坐標(biāo),鼠標(biāo)移動過程中不進(jìn)行繪畫,等到鼠標(biāo)彈起時獲取目標(biāo)點(diǎn)坐標(biāo),然后計算半徑大小,最后根據(jù)圓點(diǎn)坐標(biāo)和半徑大小繪制圓。繪畫核心Javascript代碼如下:

        3.5 繪制矩形

        畫矩形,也是采用類似直線的兩點(diǎn)方式,鼠標(biāo)按下獲取矩形的左上角坐標(biāo),鼠標(biāo)彈起獲取矩形的右下角坐標(biāo),長和寬根據(jù)兩點(diǎn)坐標(biāo)相減獲得。

        3.6 取色板

        取色板是采用矩形填充方式生成的,從紅色漸變到綠色,再漸變到藍(lán)色。取色則是根據(jù)鼠標(biāo)按下的坐標(biāo),換算成相應(yīng)的RGB值,然后設(shè)置主畫布2D渲染對象的strokeStyle。以下是生成取色板的Javascript代碼:

        3.7 設(shè)置線條大小

        設(shè)置線條大小比較簡單,就是將下來框獲取到的值賦值給主畫布2D渲染對象的lineWidth屬性。Javascript代碼如下:

        3.8 iframe 動態(tài)載入

        通過設(shè)置iframe的src值,實(shí)現(xiàn)iframe內(nèi)容的動態(tài)載入。Javascript代碼如下:

        4 總結(jié)

        本文介紹了HTML5的特性,提出使用Canvas進(jìn)行網(wǎng)頁電子畫板設(shè)計的設(shè)計思路及具體實(shí)現(xiàn),實(shí)踐證明繪制圖形效果良好。HTML5作為下一代HTML標(biāo)準(zhǔn),將來將為我們帶來更多的驚喜。

        猜你喜歡
        畫板鼠標(biāo)矩形
        Progress in Neural NLP: Modeling, Learning, and Reasoning
        Engineering(2020年3期)2020-09-14 03:42:00
        兩矩形上的全偏差
        化歸矩形證直角
        從矩形內(nèi)一點(diǎn)說起
        七彩畫板
        七彩畫板
        七彩畫板
        七彩畫板
        45歲的鼠標(biāo)
        超能力鼠標(biāo)
        IM家庭電子(2008年11期)2008-12-05 09:49:20
        熟女少妇在线视频播放| 国产成人精品一区二区不卡| 色视频网站一区二区三区| 亚洲精品久久久久久久不卡四虎| 国产精品二区在线观看| 蜜桃av多人一区二区三区| 亚洲乱妇熟女爽到高潮视频高清| 国产特黄级aaaaa片免| 国产亚洲精品久久久久久久久动漫| 免费在线日韩| 日韩有码在线一区二区三区合集 | 2021年最新久久久视精品爱| 精品少妇一区二区三区四区| 国内自拍情侣露脸高清在线| 亚洲av日韩综合一区在线观看| 国产91 对白在线播放九色| 久久久人妻一区精品久久久 | 人妖与人妖免费黄色片| 一本色道久久hezyo无码| 国产尤物精品福利视频| 久久精品免视看国产盗摄| 国产在线一区二区三区不卡| 国产精品久免费的黄网站| 无码人妻精品一区二区三区在线| 国产精品久久久久亚洲| 日韩av一区二区三区高清| 亚洲愉拍99热成人精品热久久| 在线中文字幕有码中文| 婷婷色在线视频中文字幕| 亚洲中文字幕人妻久久| 久久久久久好爽爽久久| 久久天堂av色综合| 亚洲24小时免费视频| 国产免费艾彩sm调教视频| 国产2021精品视频免费播放| av在线男人的免费天堂| 永久免费毛片在线播放| 一本大道东京热无码| 亚洲一区二区三区免费av在线| 狠色人妻丝袜中文字幕| 少妇性饥渴bbbbb搡bbbb|