大于I的顯示設(shè)備稱之為高清顯示設(shè)備。本發(fā)明實施例提供的網(wǎng)頁瀏覽器的Canvas繪圖裝置，用于替換初始化時網(wǎng)頁瀏覽器的原生Canvas對象，整個實施過程無需對原有大量的繪圖代碼進行修改；初始化過程可在原有繪圖程序進行繪圖之前全部完成，無需對原有繪圖程序的繪圖邏輯做任何改變即可達到目的，實施簡單快速。
[0029]下面對本發(fā)明實施例提供的網(wǎng)頁瀏覽器的Canvas繪圖裝置的實現(xiàn)原理進行詳細說明。
[0030]1、本發(fā)明實施例中，將網(wǎng)頁瀏覽器的Canvas繪圖裝置記作xh5_Canvas，對HTML5的原生Canvas進行封裝，內(nèi)部生成Canvas實例，構(gòu)造函數(shù)接收寬、高兩個參數(shù)，可以稱為Canvas的指定尺寸；并對外暴露用于重置Canvas的指定尺寸的APIresize (width_, height_)，同樣接收寬、高兩個參數(shù)。
[0031]2,xh5_Canvas初始化時，進行網(wǎng)頁瀏覽器的Canvas兼容性檢查，兼容性檢查主要涉及網(wǎng)頁瀏覽器是否可以生成具備可用Canvas繪圖上下文的Canvas對象。在確認網(wǎng)頁瀏覽器對Canvas的支持后，使用網(wǎng)頁瀏覽器原生的頁面元素生成函數(shù)，根據(jù)Canvas的指定尺寸初始化生成Canvas對象并獲取其繪圖上下文。
[0032]實現(xiàn)代碼如下:
[0033]var canvas = document.createElement (' canvas')；
[0034]if (canvas.getContext && canvas.getContext (，2d，)){/* 支持 HTML5Canvas*/}
[0035]3、讀取DPR (device pixel rat1，設(shè)備像素比)和Canvas繪圖上下文的BSPR(backing storage pixel rat1，緩沖區(qū)像素比)。DPR缺省值設(shè)定為I，BSPR缺省值設(shè)定為I。確定DPR值與BSPR值二者之比，記作HDPR，本發(fā)明實施例中，將HDPR稱為縮放比例參數(shù)，并存儲備用。需要說明的是，部分顯示設(shè)備上DPR的實際取值不為整數(shù)，由于“半像素”問題同樣會導(dǎo)致圖像邊緣模糊，本發(fā)明實施例中對DPR的實際取值向上取整，從而獲取到DPR值供使用。
[0036]實現(xiàn)代碼如下:
[0037]var dr = Math, ceil(window.devicePixeIRat1 |I),
[0038]bspr = canvas.getContext(’ 2d’).WebkitBackingStorePixeIRat1 |I ；
[0039]var hdpr = dr/bspr ；
[0040]4、實例化Canvas對象及通過resize重置的實現(xiàn)。
[0041]將由參數(shù)設(shè)置的寬、高作為Canvas的指定尺寸，以CSS (層疊樣式表)形式作用于Canvas對象，作為頁面內(nèi)容排版使用；
[0042]按照確定出的HDPR值，對Canvas的指定尺寸(即參數(shù)指定的寬、高)進行縮放(即按照HDPR值對Canvas的指定尺寸放大相應(yīng)倍數(shù))，得到Canvas的實際尺寸，用以承載繪圖程序產(chǎn)生的圖像數(shù)據(jù)；
[0043]按照確定出的HDPR值，使用公有縮放函數(shù)scale對Canvas繪圖上下文進行縮放(即按照HDPR值對Canvas繪圖上下文放大相應(yīng)倍數(shù))。
[0044]實現(xiàn)代碼如下:
[0045]canvas, style, width = width—+’ px’ ；
[0046]canvas, style, height = height_+’ px ；
[0047]canvas, width = width—*hdpr ；
[0048]canvas, height = height_*hdpr ；
[0049]canvas.getContext (，2d，).scale (hdpr, hdpr);
[0050]5、至此網(wǎng)頁瀏覽器的Canvas繪圖裝置xh5—Canvas準備完畢。將繪圖代碼初始化時生成canvas對象的部分替換為本裝置，即可在各顯示設(shè)備中獲得清晰成像。
[0051]實現(xiàn)代碼如下:
[0052]var canvas ；
[0053]canvas = document.createElement (，canvas') ;/* 被替換的原有代碼:*/
[0054]var module = new xh5_Canvas (width, height) ；canvas = module, canvas ;/* 替換的新代碼*/
[0055]基于以上實現(xiàn)原理的介紹，本發(fā)明實施例提供一種網(wǎng)頁瀏覽器的Canvas繪圖方法，如圖1所示，包括:
[0056]S101、根據(jù)設(shè)置的Canvas (畫布)的指定尺寸初始化生成Canvas對象，并獲取Canvas繪圖上下文。
[0057]需要說明的是，根據(jù)設(shè)置的Canvas的指定尺寸初始化生成Canvas對象，并獲取Canvas繪圖上下文之前，還包括網(wǎng)頁瀏覽器創(chuàng)建HTML(超文本標記語言)頁面的步驟。
[0058]較佳的，所述根據(jù)設(shè)置的Canvas的指定尺寸初始化生成Canvas對象之前，還包括:通過對網(wǎng)頁瀏覽器的Canvas兼容性檢查確認網(wǎng)頁瀏覽器支持Canvas。所述Canvas兼容性檢查包括網(wǎng)頁瀏覽器是否可以生成具備可用Canvas繪圖上下文的Canvas對象。
[0059]S102、獲取DPR(設(shè)備像素比)和Canvas繪圖上下文的BSPR(緩沖區(qū)像素比)，根據(jù)獲取到的DPR值與BSPR值二者之比，確定HDPR (縮放比例參數(shù))值。
[0060]具體實施中，獲取到的DPR值由DPR的實際取值向上取整得到。
[0061]S103、實例化Canvas對象，按照確定出的HDPR值對Canvas繪圖上下文進行縮放，按照確定出的HDPR值對Canvas的指定尺寸進行縮放得到Canvas的實際尺寸用以承載繪圖程序產(chǎn)生的圖像數(shù)據(jù)，設(shè)定Canvas的指定尺寸用以頁面內(nèi)容排版。
[0062]其中，設(shè)定Canvas的指定尺寸用以頁面內(nèi)容排版，具體包括:將Canvas的指定尺寸以CSS (層疊樣式表)形式作用于Canvas對象，作為頁面內(nèi)容排版使用。按照確定出的HDPR值對Canvas繪圖上下文進行縮放，具體包括:按照確定出的HDPR值，使用公有縮放函數(shù)scale對Canvas繪圖上下文進行縮放。
[0063]S104、網(wǎng)頁瀏覽器基于實例化的Canvas對象進行Canvas繪圖。
[0064]下面對Canvas繪圖過程進行簡單介紹:
[0065]由代碼控制的Canvas繪圖過程以像素為單位進行圖像繪制；
[0066]代碼所生成的Canvas對象在渲染輸出到顯示設(shè)備前，由網(wǎng)頁瀏覽器的緩沖區(qū)(Backing Storage)管理，Canvas每一像素的RGBA值均保存在緩沖區(qū)中，不僅僅是程序繪制所涉及的區(qū)域，空白區(qū)域也將以O(shè)值記錄，便于縮放控制；
[0067]網(wǎng)頁瀏覽器成像時，按照頁面尺寸規(guī)格(由CSS指定)進行網(wǎng)頁內(nèi)容排版，其中的圖像內(nèi)容按照DPR(設(shè)備像素比)從緩沖區(qū)讀取圖像數(shù)據(jù)。標準顯示設(shè)備的DPR值為I即不處理，緩沖區(qū)圖像數(shù)據(jù)可以滿足顯示數(shù)據(jù)量的需求；高清顯示設(shè)備的DPR值大于1，未經(jīng)本方案處理過的圖像數(shù)據(jù)將會遇到緩沖區(qū)內(nèi)圖像數(shù)據(jù)不足的問題，故網(wǎng)頁瀏覽器對其進行放大處理導(dǎo)致模糊。而經(jīng)過本方案處理的圖像數(shù)據(jù)已經(jīng)按照最終分辨率進行了適應(yīng)性放大，緩沖區(qū)內(nèi)圖像數(shù)據(jù)滿足放大后的成像要求，故最終顯示效果清晰。
[0068]需要指出的是，不同網(wǎng)頁瀏覽器在同一顯示設(shè)備上成像時，BSPR(緩沖區(qū)像素比)未必相同。例如同一臺蘋果電腦上工作的Safari 6瀏覽器的BSPR(緩沖區(qū)像素比)為2，Chrome瀏覽器的BSPR(緩沖區(qū)像素比)為I。而Safari更新到6.1及以后版本，官方又將此值重新設(shè)定為I。本發(fā)明實施例中，通過設(shè)置縮放比例參數(shù)HDPR，HDPR取值為DPR值與BSPR值二者之比，所以不會在緩沖區(qū)已將圖像數(shù)據(jù)進行放大后又再次放大，從而避免了對內(nèi)存占用和顯示性能造成的影響。
[0069]本發(fā)明實施例中，xh5_Canvas初始化時計算得到的HDPR值在標準顯示設(shè)備上為1，后繼處理過程進行乘I操作依然為原值，即不對標準顯示設(shè)備進行處理；高清顯示設(shè)備上設(shè)備像素比大于1，同樣根據(jù)HDPR值，如果沒有網(wǎng)頁瀏覽器處理且緩沖區(qū)像素比為I的情況下，HDPR值將大于I進而對Canvas對象進行放大處理以獲得最終顯示足夠的圖像數(shù)據(jù)量；瀏覽器緩沖區(qū)已進行放大處理的情況，例如DPR值與BSPR值均為2，HDPR值又為1，即不會進行二次處理。