本發(fā)明的實施方式涉及互聯(lián)網(wǎng)領(lǐng)域，更具體地，本發(fā)明的實施方式涉及一種避免繪制在canvas畫布中的圖形失真的方法、介質(zhì)、裝置和計算設(shè)備。

背景技術(shù)：

本部分旨在為權(quán)利要求書中陳述的本發(fā)明的實施方式提供背景或上下文。此處的描述不因為包括在本部分中就承認(rèn)是現(xiàn)有技術(shù)。

在網(wǎng)頁實時生成圖像中，canvas畫布得到了非常廣泛的應(yīng)用。

技術(shù)實現(xiàn)要素：

但是，現(xiàn)有技術(shù)中由于不同的設(shè)備的配置不同、對canvas畫布進行存儲的機制不同、和/或瀏覽器的縮放程度不同，常常會導(dǎo)致繪制到canvas畫布上的圖形出現(xiàn)失真現(xiàn)象，從而變得不清晰。

因此在現(xiàn)有技術(shù)中，這是非常令人煩惱的過程。

為此，非常需要一種改進的解決途徑，以使繪制在canvas畫布、上的圖形在在不同的設(shè)備上、和/或不同的瀏覽器的縮放程度時，都能夠清晰地顯示圖形，而不發(fā)生失真。

在本上下文中，本發(fā)明的實施方式期望提供一種避免繪制在canvas畫布中的圖形失真的方法、介質(zhì)、裝置和計算設(shè)備。

在本發(fā)明實施方式的第一方面中，提供了一種避免繪制在canvas畫布中的圖形失真的方法，該canvas畫布在屏幕上所占的像素數(shù)量與其以設(shè)備獨立像素度量的尺寸成正比，該canvas畫布的內(nèi)存像素數(shù)量與該canvas畫布的邏輯尺寸成正比，該內(nèi)存像素數(shù)量是用于保存該canvas畫布的像素信息的內(nèi)存空間所對應(yīng)的像素數(shù)量，該方法包括：計算該canvas畫布的總伸縮比ratio，該總伸縮比ratio表示當(dāng)該canvas畫布的邏輯尺寸與其以設(shè)備獨立像素度量的尺寸一致時，該canvas畫布在屏幕上所占的像素數(shù)量與其內(nèi)存像素數(shù)量之比；設(shè)置該canvas畫布的邏輯尺寸為其以設(shè)備獨立像素度量的尺寸與該總伸縮比ratio的乘積，以使繪制在該canvas畫布中的圖形在屏幕上所占的像素數(shù)量與其內(nèi)存像素數(shù)量相等。

在本發(fā)明的一個實施例中，該總伸縮比ratio＝設(shè)備獨立像素比/緩存像素內(nèi)存比，其中，該設(shè)備獨立像素比為該canvas畫布的設(shè)備像素與其設(shè)備獨立像素之比，該緩存像素內(nèi)存比為該canvas畫布的內(nèi)存像素數(shù)量與其邏輯尺寸之比。

在本發(fā)明的另一實施例中，在計算該canvas畫布的總伸縮比ratio之前，還包括根據(jù)瀏覽器的當(dāng)前狀態(tài)，獲取該設(shè)備獨立像素比。

在本發(fā)明的又一個實施例中，該方法還包括：通過將圖形的以設(shè)備獨立像素度量的第一位置坐標(biāo)和第一尺寸分別乘以該總伸縮比ratio獲得第二位置坐標(biāo)和第二尺寸；根據(jù)第二位置坐標(biāo)和第二尺寸將該圖形繪制在該canvas畫布中。

在本發(fā)明的再一個實施例中，該方法還包括：確定該圖形以設(shè)備獨立像素度量的第一位置坐標(biāo)和第一尺寸。

在本發(fā)明實施方式的第二方面中，提供了一種計算機可讀存儲介質(zhì)，其上存儲有可執(zhí)行指令，該指令在被處理器執(zhí)行時使處理器執(zhí)行上述的避免繪制在canvas畫布中的圖形失真的方法。

在本發(fā)明實施方式的第三方面中，提供了一種避免繪制在canvas畫布中的圖形失真的裝置，該canvas畫布在屏幕上所占的像素數(shù)量與其以設(shè)備獨立像素度量的尺寸成正比，該canvas畫布的內(nèi)存像素數(shù)量與該canvas畫布的邏輯尺寸成正比，該內(nèi)存像素數(shù)量是用于保存該canvas畫布的像素信息的內(nèi)存空間所對應(yīng)的像素數(shù)量，該裝置包括：總伸縮比計算模塊，用于計算該canvas畫布的總伸縮比ratio，該總伸縮比ratio表示當(dāng)該canvas畫布的邏輯尺寸與其以設(shè)備獨立像素度量的尺寸一致時，該canvas畫布在屏幕上所占的像素數(shù)量與其內(nèi)存像素數(shù)量之比；畫布的邏輯尺寸設(shè)置模塊，設(shè)置該canvas畫布的邏輯尺寸為其以設(shè)備獨立像素度量的尺寸與該總伸縮比ratio的乘積，以使繪制在該canvas畫布中的圖形在屏幕上所占的像素數(shù)量與其內(nèi)存像素數(shù)量相等。

在本發(fā)明的一個實施例中，所述總伸縮比ratio＝設(shè)備獨立像素比/緩存像素內(nèi)存比，其中，所述設(shè)備獨立像素比為所述canvas畫布的設(shè)備像素與其設(shè)備獨立像素之比，所述緩存像素內(nèi)存比為所述canvas畫布的內(nèi)存像素數(shù)量與其邏輯尺寸之比。

在本發(fā)明的另一個實施例中，該裝置還包括設(shè)備獨立像素比獲取模塊，用于根據(jù)瀏覽器的當(dāng)前狀態(tài)獲取所述設(shè)備獨立像素比。

在本發(fā)明的又一個實施例中，該裝置還包括畫布中的圖形定位模塊和圖形繪制模塊。其中，畫布中的圖形定位模塊用于通過將圖形的以設(shè)備獨立像素度量的第一位置坐標(biāo)和第一尺寸分別乘以所述總伸縮比ratio獲得第二位置坐標(biāo)和第二尺寸。圖形繪制模塊用于根據(jù)第二位置坐標(biāo)和第二尺寸將所述圖形繪制在所述canvas畫布中。

在本發(fā)明的再一個實施例中，還包括以設(shè)備獨立像素度量的圖形定位模塊，用于確定所述圖形以設(shè)備獨立像素度量的第一位置坐標(biāo)和第一尺寸。

在本發(fā)明實施方式的第四方面中，提供了一種計算設(shè)備，包括：一個或多個存儲器，存儲有可執(zhí)行指令；以及一個或多個處理器，執(zhí)行該可執(zhí)行指令，以實現(xiàn)上述的避免繪制在canvas畫布中的圖形失真的方法。

根據(jù)本發(fā)明實施方式的方法、介質(zhì)、裝置和計算設(shè)備，可以至少地實現(xiàn)在不同的設(shè)備上、和/或不同的瀏覽器的縮放程度時，繪制在canvas畫布上的圖像都不會發(fā)生顯示失真，為用戶帶來了更好的體驗。

附圖說明

通過參考附圖閱讀下文的詳細(xì)描述，本發(fā)明示例性實施方式的上述以及其他目的、特征和優(yōu)點將變得易于理解。在附圖中，以示例性而非限制性的方式示出了本發(fā)明的若干實施方式，其中：

圖1示意性地示出了根據(jù)本發(fā)明實施方式的應(yīng)用場景示意圖；

圖2示意性地示出了根據(jù)本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的方法的實施流程示意圖；

圖3a、圖3b示意性地示出了根據(jù)本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的方法的實現(xiàn)原理圖；

圖4示意性地示出了根據(jù)本發(fā)明另一實施例的避免繪制在canvas畫布中的圖形失真的方法的實施流程示意圖；

圖5示意性地示出了根據(jù)本發(fā)明又一實施例的避免繪制在canvas畫布中的圖形失真的方法的實施流程示意圖；

圖6示意性地示出了根據(jù)本發(fā)明再一實施例的避免繪制在canvas畫布中的圖形失真的方法的實施流程示意圖；

圖7示意性地示出了根據(jù)本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的程序產(chǎn)品示意圖；

圖8示意性地示出了根據(jù)本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的裝置的框圖；以及

圖9示意性的示出了根據(jù)本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的計算設(shè)備的框圖。

在附圖中，相同或?qū)?yīng)的標(biāo)號表示相同或?qū)?yīng)的部分。

具體實施方式

下面將參考若干示例性實施方式來描述本發(fā)明的原理和精神。應(yīng)當(dāng)理解，給出這些實施方式僅僅是為了使本領(lǐng)域技術(shù)人員能夠更好地理解進而實現(xiàn)本發(fā)明，而并非以任何方式限制本發(fā)明的范圍。相反，提供這些實施方式是為了使本發(fā)明更加透徹和完整，并且能夠?qū)⒈竟_的范圍完整地傳達給本領(lǐng)域的技術(shù)人員。

本領(lǐng)域技術(shù)人員知道，本發(fā)明的實施方式可以實現(xiàn)為一種系統(tǒng)、裝置、設(shè)備、方法或計算機程序產(chǎn)品。因此，本發(fā)明可以具體實現(xiàn)為以下形式，即：完全的硬件、完全的軟件(包括固件、駐留軟件、微代碼等)，或者硬件和軟件結(jié)合的形式。

根據(jù)本發(fā)明的實施方式，提出了一種避免繪制在canvas畫布中的圖形失真的方法、介質(zhì)、裝置和計算設(shè)備。

在本文中，需要理解的是，所涉及的術(shù)語失真表示繪制在canvas畫布中的圖形在屏幕上顯示時模糊不清。此外，附圖中的任何元素數(shù)量均用于示例而非限制，以及任何命名都僅用于區(qū)分，而不具有任何限制含義。

下面參考本發(fā)明的若干代表性實施方式，詳細(xì)闡釋本發(fā)明的原理和精神。

發(fā)明概述

本發(fā)明人發(fā)現(xiàn)，繪制到canvas畫布中的圖形失真是由于該canvas畫布在屏幕上所占的像素數(shù)量與該canvas畫布的內(nèi)存像素數(shù)量不一致導(dǎo)致的，其中該canvas畫布的內(nèi)存像素數(shù)量是用于保存該canvas畫布的像素信息的內(nèi)存空間所對應(yīng)的像素數(shù)量。因為在瀏覽器將canvas畫布中的圖形渲染到屏幕上時，是將該canvas畫布的內(nèi)存像素中的信息渲染到屏幕上。因此，當(dāng)該canvas畫布的內(nèi)存像素數(shù)量和該canvas畫布在屏幕上所占的像素數(shù)量不對應(yīng)時，就會發(fā)生圖形失真。

據(jù)此可以推知，如果對于任何設(shè)備和/或瀏覽器的縮放情況，只要能使得其中的canvas畫布的內(nèi)存像素數(shù)量和其在屏幕上所占的像素數(shù)量始終保持一一對應(yīng)關(guān)系，那么繪制到該canvas畫布中的圖形在屏幕上顯示時就不會失真。

在介紹了本發(fā)明的基本原理之后，下面具體介紹本發(fā)明的各種非限制性實施方式。

應(yīng)用場景總覽

首先參考圖1

圖1示意性地示出了根據(jù)本發(fā)明實施方式的應(yīng)用場景示意圖。

如圖1所示，用戶終端11中安裝有瀏覽器，用戶通過用戶終端11中安裝的瀏覽器向網(wǎng)站服務(wù)器12發(fā)送網(wǎng)頁獲取請求，網(wǎng)站服務(wù)器12將用戶請求的網(wǎng)頁發(fā)送給用戶終端11，由用戶終端11中安裝的瀏覽器對接收到的網(wǎng)頁信息進行展示，其中網(wǎng)頁中實時生成圖像通過canvas繪制而成。

用戶終端11和網(wǎng)站服務(wù)器12通過網(wǎng)絡(luò)連接，該網(wǎng)絡(luò)可以為局域網(wǎng)、廣域網(wǎng)、移動互聯(lián)網(wǎng)等。用戶終端11可以為便攜設(shè)備(例如：手機、平板、筆記本電腦等)，也可以為個人電腦(pc，personalcomputer)，網(wǎng)站服務(wù)器12可以為任何能夠提供網(wǎng)站服務(wù)的服務(wù)器設(shè)備。

示例性方法

下面結(jié)合圖1的應(yīng)用場景，參考圖2來描述根據(jù)本發(fā)明示例性實施方式的避免繪制在canvas畫布中的圖形失真的方法。需要注意的是，上述應(yīng)用場景僅是為了便于理解本發(fā)明的精神和原理而示出，本發(fā)明的實施方式在此方面不受任何限制。相反，本發(fā)明的實施方式可以應(yīng)用于適用的任何場景。

圖2示意性地示出了根據(jù)本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的方法的實施流程示意圖。

如圖2所示，根據(jù)本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的方法包括步驟s201和s202。

具體地，根據(jù)本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的方法中，該canvas畫布在屏幕上所占的像素數(shù)量與其以設(shè)備獨立像素度量的尺寸成正比，該canvas畫布的內(nèi)存像素數(shù)量與該canvas畫布的邏輯尺寸成正比，該內(nèi)存像素數(shù)量是用于保存該canvas畫布的像素信息的內(nèi)存空間所對應(yīng)的像素數(shù)量。

在步驟s201，計算該canvas畫布的總伸縮比ratio，該總伸縮比ratio表示當(dāng)該canvas畫布的邏輯尺寸與其以設(shè)備獨立像素度量的尺寸一致時，該canvas畫布在屏幕上所占的像素數(shù)量與其內(nèi)存像素數(shù)量之比。

在步驟s202，設(shè)置該canvas畫布的邏輯尺寸為其以設(shè)備獨立像素度量的尺寸與該總伸縮比ratio的乘積，以使繪制在該canvas畫布中的圖形在屏幕上所占的像素數(shù)量與其內(nèi)存像素數(shù)量相等。

為更好地理解本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的方法，請參考圖3a和圖3b中的示意性描述。

圖3a、圖3b示意性地示出了根據(jù)本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的方法的實現(xiàn)原理圖。

在圖3a示意性示出了同一個canvas畫布的三種度量形式：分別是canvas畫布301-1，其大小為以設(shè)備獨立像素度量的尺寸、canvas畫布301-21，其大小為邏輯尺寸；canvas畫布301-3，其大小為在屏幕中展示的尺寸。

需要說明的是，在實際中，只有canvas畫布301-3是用戶可以真實看到的畫布，而canvas畫布301-1和canvas畫布301-21是在設(shè)置該canvas畫布尺寸時用于計算的一種抽象的概念，并不會是用戶真實能夠看到的canvas畫布，在圖3a中為了便于說明該canvas畫布的各種度量形式之間的邏輯關(guān)系，用具有一定面積的圖形示意性地表示出canvas畫布301-1和canvas畫布301-21，其中表示canvas畫布301-1的圖形的大小與該canvas畫布的以設(shè)備獨立像素度量的尺寸相對應(yīng)，表示canvas畫布301-21的圖形的大小與該canvas畫布的邏輯尺寸相對應(yīng)。

其中，設(shè)備獨立像素是計算機坐標(biāo)系中的一點，與設(shè)備無關(guān)，是程序可用的虛擬像素，比如cascadingstylesheets層疊表樣式像素(簡稱css像素)。以設(shè)備獨立像素度量的尺寸例如是在該canvas畫布設(shè)置時canvas.style.width對應(yīng)的畫布寬度、和canvas.style.height對應(yīng)的畫布高度。

邏輯尺寸是該canvas畫布的尺寸屬性，例如，可以是通過canvas.width和canvas.height分別設(shè)置的canvas畫布的寬度和高度。

在屏幕上展示的canvas畫布的尺寸是根據(jù)瀏覽器將該canvas畫布渲染到屏幕上時在屏幕上所占的像素數(shù)量來確定的尺寸。

另外，圖3a中還示意性表示出該canvas畫布占用的內(nèi)存空間302-1，其表示的是用于保存該canvas畫布的像素信息的內(nèi)存空間，該內(nèi)存空間所對應(yīng)的像素數(shù)量就是該canvas畫布的內(nèi)存像素數(shù)量。

可以理解的是，圖3a中該canvas畫布占用的內(nèi)存空間302-1被示意性地表示為一個具有一定尺寸的圖形，是為了便于說明該canvas畫布的內(nèi)存像素數(shù)量與其各種度量形式之間的邏輯關(guān)系。圖3a表示內(nèi)存空間302-1圖形的大小與該canvas畫布的內(nèi)存像素數(shù)量相對應(yīng)。

根據(jù)本發(fā)明實施例，該canvas畫布在屏幕上所占的像素數(shù)量與其以設(shè)備獨立像素度量的尺寸成正比。

如圖3a所示，屏幕上展示的canvas畫布301-3的尺寸大小與以設(shè)備獨立像素度量的尺寸展示的canvas畫布301-1的尺寸大小成正比，例如圖中所示的這個比例系數(shù)為a，比例系數(shù)a可以是任意的正數(shù)。換言之，以設(shè)備獨立像素度量的尺寸展示的canvas畫布301-1越大，在屏幕上展示的canvas畫布301-3的尺寸也會越大。

根據(jù)本發(fā)明實施例，該canvas畫布的內(nèi)存像素數(shù)量與其的邏輯尺寸成正比。

因此，該canvas畫布的內(nèi)存像素數(shù)量與以邏輯尺寸展示的canvas畫布301-21的大小成正比，例如圖中所示的這個比例系數(shù)為b，比例系數(shù)b也可以是任意的正數(shù)。這樣，圖3a中以邏輯尺寸展示的canvas畫布301-21越大，該canvas畫布占用的內(nèi)存空間302-1也會越大。

在操作s201，計算該canvas畫布的總伸縮比ratio。該總伸縮比ratio表示當(dāng)該canvas畫布的邏輯尺寸與其以設(shè)備獨立像素度量的尺寸一致時，該canvas畫布在屏幕上所占的像素數(shù)量與其內(nèi)存像素數(shù)量之比。

具體地，該canvas畫布的邏輯尺寸與其以設(shè)備獨立像素度量的尺寸一致，在圖3a中示意性地表示為以設(shè)備獨立像素度量的尺寸展示的canvas畫布301-1和以邏輯尺寸展示的canvas畫布301-21大小一致。此時，canvas畫布301的總伸縮比ratio就是canvas畫布301-3在屏幕上所占的像素數(shù)量與內(nèi)存空間302-1所對應(yīng)的內(nèi)存像素數(shù)量之比，例如，圖3a中示意性表示為在canvas畫布301-3與內(nèi)存空間302-1的尺寸之比。

在操作s202，設(shè)置canvas畫布301的邏輯尺寸為其以設(shè)備獨立像素度量的尺寸與該總伸縮比ratio的乘積。

具體地，參考圖3b，以設(shè)備獨立像素度量的尺寸展示的canvas畫布301-1和在屏幕上展示的canvas畫布301-3的大小均不變。

此時，設(shè)置canvas畫布301的邏輯尺寸為其以設(shè)備獨立像素度量的尺寸與該總伸縮比ratio的乘積，即圖3b的示例中以邏輯尺寸展示的canvas畫布301-22的大小為canvas畫布301-1的ratio倍。

由于在圖3a中以邏輯尺寸展示的canvas畫布301-21的大小與以設(shè)備獨立像素度量的尺寸展示的canvas畫布301-1的大小相同。因此，相當(dāng)于canvas畫布301-22變?yōu)閏anvas畫布301-21的ratio倍。對應(yīng)于以邏輯尺寸展示的canvas畫布301-22，其在內(nèi)存像素數(shù)量也相應(yīng)地變?yōu)樵瓉淼膔atio倍。即，在圖3b中內(nèi)存空間302-2變?yōu)閳D3a中的內(nèi)存空間302-1的ratio倍。

此時，如圖3b示意性地表示，在屏幕上顯示的canvas畫布301-3與在內(nèi)存空間302-2的大小一致。即經(jīng)過步驟s202的設(shè)置，該canvas畫布在屏幕上所占的像素數(shù)量與其內(nèi)存像素數(shù)量相等。

從而，當(dāng)瀏覽器將繪制到該canvas畫布中的圖形渲染到屏幕上時，可以將保存該canvas畫布的像素信息的內(nèi)存空間中的像素一一對應(yīng)地渲染到屏幕的像素中，從而能夠保證在屏幕顯示中繪制到該canvas畫布中的圖形不會失真。

根據(jù)本發(fā)明的實施例，對于任何設(shè)備和/或瀏覽器的縮放情況，通過計算該canvas畫布的總伸縮比ratio，并設(shè)置該canvas畫布的邏輯尺寸為其以設(shè)備獨立像素度量的尺寸與該總伸縮比ratio的乘積，就能夠使得繪制在該canvas畫布中的圖形在屏幕上所占的像素數(shù)量與其內(nèi)存像素數(shù)量相等，從而避免繪制在canvas畫布中的圖形失真。

根據(jù)本發(fā)明實施例，計算canvas畫布的總伸縮比ratio，可以根據(jù)其物理意義，獲取到當(dāng)該canvas畫布的邏輯尺寸與其以設(shè)備獨立像素度量的尺寸一致時，該canvas畫布在屏幕上所占的像素數(shù)量和該canvas畫布內(nèi)存像素數(shù)量，然后通過二者的比值計算得到總伸縮比ratio。

根據(jù)本發(fā)明實施例，計算該canvas畫布的總伸縮比ratio，也可以根據(jù)設(shè)備獨立像素比和緩存像素內(nèi)存比間接計算得到。

具體地，該canvas畫布的總伸縮比ratio＝設(shè)備獨立像素比/緩存像素內(nèi)存比，其中，該設(shè)備獨立像素比為該canvas畫布的設(shè)備像素與其設(shè)備獨立像素之比，該緩存像素內(nèi)存比為該canvas畫布的內(nèi)存像素數(shù)量與其邏輯尺寸之比。

具體地，該canvas畫布的總伸縮比ratio＝設(shè)備獨立像素比/緩存像素內(nèi)存比的原因解釋如下：

當(dāng)該canvas畫布的邏輯尺寸與其以設(shè)備獨立像素度量的尺寸相等時時，在式(1)“canvas畫布以設(shè)備獨立像素度量的尺寸”替換“canvas畫布的邏輯尺寸”，可以進一步得到式(1)的表達式為：

根據(jù)式(2)可以看出，“設(shè)備獨立像素比/緩存像素內(nèi)存比”的物理意義為當(dāng)該canvas畫布的邏輯尺寸與其以設(shè)備獨立像素度量的尺寸一致時，該canvas畫布在屏幕上所占的像素數(shù)量與其內(nèi)存像素數(shù)量之比。

因此：

ratio＝設(shè)備獨立像素比/緩存像素內(nèi)存比(3)

根據(jù)本發(fā)明實施例，根據(jù)設(shè)備獨立像素比和緩存像素內(nèi)存比間接計算總伸縮比ratio，簡化了操作s201中計算總伸縮比ratio的過程，提高了根據(jù)本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的方法的應(yīng)用效率。

圖4示意性地示出了根據(jù)本發(fā)明另一實施例的避免繪制在canvas畫布中的圖形失真的方法的實施流程示意圖。

如圖4所示，根據(jù)本發(fā)明另一實施例的避免繪制在canvas畫布中的圖形失真的方法在步驟s201和步驟s202之前，還包括步驟s401。

在步驟s401，根據(jù)瀏覽器的當(dāng)前狀態(tài)，獲取設(shè)備獨立像素比。

瀏覽器的縮放程度會改變展示該canvas畫布的設(shè)備像素。根據(jù)瀏覽器的當(dāng)前狀態(tài)，獲取到設(shè)備獨立像素比，為操作s201計算總壓縮比ratio提供數(shù)據(jù)。

根據(jù)本發(fā)明的實施例，當(dāng)瀏覽器放大或縮小時，就要按照圖4所示的步驟來設(shè)置該canvas畫布的邏輯尺寸，從而避免繪制在該canvas畫布中的圖形失真。

圖5示意性地示出了根據(jù)本發(fā)明又一實施例的避免繪制在canvas畫布中的圖形失真的方法的實施流程示意圖。

如圖5所示，根據(jù)本發(fā)明又一實施例的避免繪制在canvas畫布中的圖形失真的方法在步驟s201和步驟s202之后，還包括步驟s503和步驟s504。

在步驟s503，通過將圖形的以設(shè)備獨立像素度量的第一位置坐標(biāo)和第一尺寸分別乘以該總伸縮比ratio獲得第二位置坐標(biāo)和第二尺寸；

在步驟s504，根據(jù)第二位置坐標(biāo)和第二尺寸將該圖形繪制在該canvas畫布中。

根據(jù)本發(fā)明實施例，通過將圖形的第一位置坐標(biāo)和第一尺寸分別乘以總伸縮臂ratio獲得第二位置坐標(biāo)和第二尺寸，根據(jù)第二位置坐標(biāo)和第二尺寸將該圖形繪制在該canvas畫布中。這樣，該canvas畫布的邏輯尺寸是其以設(shè)備獨立像素度量的尺寸的ratio倍，繪制在該canvas畫布中的圖形的位置和尺寸也是設(shè)備獨立像素度量的尺寸的ratio倍，從而保證了繪制在該canvas畫布中的圖形是在以設(shè)備獨立像素度量的計算空間中獲得圖形的等比例變換。以此方式，在保證用戶看到的繪制在該canvas畫布中的圖形不失真的同時，不會使用戶感到圖形的大小有任何不適應(yīng)之處，從而提升了用戶體驗。

圖6示意性地示出了根據(jù)本發(fā)明再一實施例的避免繪制在canvas畫布中的圖形失真的方法的實施流程示意圖。

如圖6所示，根據(jù)本發(fā)明再一實施例的避免繪制在canvas畫布中的圖形失真的方法在步驟s201、步驟s202、步驟s503和步驟s504外，還包括步驟s603。

在步驟s603，確定圖形以設(shè)備獨立像素度量的第一位置坐標(biāo)和第一尺寸。

可以理解的是，圖6中步驟s603位于步驟s202之后和步驟s503之前僅是示例。事實上，步驟s603可以位于s503之前的任何時候。也即步驟s603與步驟s201和步驟s202之間相互獨立，沒有先后順序之分。

根據(jù)本發(fā)明的實施例，要在該canvas畫布中繪制新的圖形時，需要先通過步驟s603確定圖形以設(shè)備獨立像素度量的第一位置坐標(biāo)和第一尺寸。然后通過按照步驟s503和s504將圖形繪制在該canvas畫布中。

示例性介質(zhì)

在介紹了本發(fā)明示例性實施方式的方法之后，接下來，參考圖7對本發(fā)明示例性實施方式的避免繪制在canvas畫布中的圖形失真的程序產(chǎn)品進行描述。

如圖7所示，根據(jù)本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的程序產(chǎn)品700中存儲有可執(zhí)行指令，當(dāng)該可執(zhí)行指令被處理器執(zhí)行時使處理器執(zhí)行參考圖2以及圖4～圖6的方法。

在一些可能的實施方式中，本發(fā)明的各個方面還可以實現(xiàn)為一種程序產(chǎn)品的形式，其包括程序代碼，當(dāng)所述程序產(chǎn)品在計算設(shè)備上運行時，所述程序代碼用于使所述計算設(shè)備執(zhí)行本說明書上述“示例性方法”部分中描述的根據(jù)本發(fā)明各種示例性實施方式的用于圖表的數(shù)據(jù)處理方法中的步驟，例如，所述計算設(shè)備可以執(zhí)行如圖2中所示的步驟s201：計算該canvas畫布的總伸縮比ratio；步驟s202：設(shè)置該canvas畫布的邏輯尺寸為其以設(shè)備獨立像素度量的尺寸與該總伸縮比ratio的乘積。

所述程序產(chǎn)品可以采用一個或多個可讀介質(zhì)的任意組合?？勺x介質(zhì)可以是可讀信號介質(zhì)或者可讀存儲介質(zhì)。可讀存儲介質(zhì)例如可以是——但不限于——電、磁、光、電磁、紅外線、或半導(dǎo)體的系統(tǒng)、裝置或器件，或者任意以上的組合?？勺x存儲介質(zhì)的更具體的例子(非窮舉的列表)包括：具有一個或多個導(dǎo)線的電連接、便攜式盤、硬盤、隨機存取存儲器(ram)、只讀存儲器(rom)、可擦式可編程只讀存儲器(eprom或閃存)、光纖、便攜式緊湊盤只讀存儲器(cd-rom)、光存儲器件、磁存儲器件、或者上述的任意合適的組合。

根據(jù)本發(fā)明的實施方式的避免繪制在該canvas畫布中的圖形失真的程序產(chǎn)品700，其可以采用便攜式緊湊盤只讀存儲器(cd-rom)并包括程序代碼，并可以在計算設(shè)備，例如個人電腦上運行。然而，本發(fā)明的程序產(chǎn)品不限于此，在本文件中，可讀存儲介質(zhì)可以是任何包含或存儲程序的有形介質(zhì)，該程序可以被指令執(zhí)行系統(tǒng)、裝置或者器件使用或者與其結(jié)合使用。

可讀信號介質(zhì)可以包括在基帶中或者作為載波一部分傳播的數(shù)據(jù)信號，其中承載了可讀程序代碼。這種傳播的數(shù)據(jù)信號可以采用多種形式，包括——但不限于——電磁信號、光信號或上述的任意合適的組合?？勺x信號介質(zhì)還可以是可讀存儲介質(zhì)以外的任何可讀介質(zhì)，該可讀介質(zhì)可以發(fā)送、傳播或者傳輸用于由指令執(zhí)行系統(tǒng)、裝置或者器件使用或者與其結(jié)合使用的程序。

可讀介質(zhì)上包含的程序代碼可以用任何適當(dāng)?shù)慕橘|(zhì)傳輸，包括——但不限于——無線、有線、光纜，rf等等，或者上述的任意合適的組合。

可以以一種或多種程序設(shè)計語言的任意組合來編寫用于執(zhí)行本發(fā)明操作的程序代碼，所述程序設(shè)計語言包括面向?qū)ο蟮某绦蛟O(shè)計語言——諸如java，c++等，還包括常規(guī)的過程式程序設(shè)計語言——諸如“c”，語言或類似的程序設(shè)計語言。程序代碼可以完全地在用戶計算設(shè)備上執(zhí)行、部分地在用戶設(shè)備上執(zhí)行、作為一個獨立的軟件包執(zhí)行、部分在用戶計算設(shè)備上部分在遠(yuǎn)程計算設(shè)備上執(zhí)行、或者完全在遠(yuǎn)程計算設(shè)備或服務(wù)器上執(zhí)行。在涉及遠(yuǎn)程計算設(shè)備的情形中，遠(yuǎn)程計算設(shè)備可以通過任意種類的網(wǎng)絡(luò)——包括局域網(wǎng)(lan)或廣域網(wǎng)(wan)一連接到用戶計算設(shè)備，或者，可以連接到外部計算設(shè)備(例如利用因特網(wǎng)服務(wù)提供商來通過因特網(wǎng)連接)。

示例性裝置

在介紹了本發(fā)明示例性實施方式的介質(zhì)之后，接下來，參考圖8對本發(fā)明示例性實施方式的避免繪制在canvas畫布中的圖形失真的裝置進行描述。

圖8示意性地示出了根據(jù)本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的裝置的框圖。

如圖8所示，根據(jù)本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的裝置800包括總伸縮比計算模塊810，畫布的邏輯尺寸設(shè)置模塊820。

總伸縮臂計算模塊810，用于計算該canvas畫布的總伸縮比ratio。

根據(jù)本發(fā)明的實施例，總伸縮比ratio＝設(shè)備獨立像素比/緩存像素內(nèi)存比。

畫布的邏輯尺寸設(shè)置模塊820，用于設(shè)置該canvas畫布的邏輯尺寸為其以設(shè)備獨立像素度量的尺寸與該總伸縮比ratio的乘積。

根據(jù)本發(fā)明實施例的裝置800，對于任何設(shè)備和/或瀏覽器的縮放情況，通過計算canvas畫布的總伸縮比ratio，并設(shè)置該canvas畫布的邏輯尺寸為其以設(shè)備獨立像素度量的尺寸與該總伸縮比ratio的乘積，就能夠使得繪制在該canvas畫布中的圖形在屏幕上所占的像素數(shù)量與其內(nèi)存像素數(shù)量相等，從而避免繪制在canvas畫布中的圖形失真。

根據(jù)本發(fā)明實施例的裝置800還可以包括設(shè)備獨立像素比獲取模塊830，用于根據(jù)瀏覽器的當(dāng)前狀態(tài)獲取該設(shè)備獨立像素比。

根據(jù)本發(fā)明實施例的裝置800還可以包括畫布中的圖形定位模塊840和圖形繪制模塊850。

畫布中的圖形定位模塊840，用于通過將圖形的以設(shè)備獨立像素度量的第一位置坐標(biāo)和第一尺寸分別乘以該總伸縮比ratio獲得第二位置坐標(biāo)和第二尺寸。

圖形繪制模塊850，用于根據(jù)第二位置坐標(biāo)和第二尺寸將該圖形繪制在該canvas畫布中。

通過畫布中的圖形定位模塊840和圖形繪制模塊850，保證了繪制在該canvas畫布中的圖形是在以設(shè)備獨立像素度量的計算空間中獲得圖形的等比例變換。以此方式，在保證用戶看到的繪制在該canvas畫布中的圖形不失真的同時，不會使用戶感到圖形的大小有任何適應(yīng)之處，從而提升了用戶體驗。

根據(jù)本發(fā)明實施例的裝置800還可以包括以設(shè)備獨立像素度量的圖形定位模塊860，用于確定所述圖形以設(shè)備獨立像素度量的第一位置坐標(biāo)和第一尺寸。通過以設(shè)備獨立像素度量的圖形定位模塊860，在canvas畫布繪制新的圖形時，可以確定出該圖形以設(shè)備獨立像素度量的第一位置坐標(biāo)和第一尺寸。

示例性計算設(shè)備

在介紹了本發(fā)明示例性實施方式的方法、介質(zhì)和裝置之后，接下來，參考圖9對本發(fā)明示例性實施方式的避免繪制在canvas畫布中的圖形失真的計算設(shè)備進行描述。

本發(fā)明示例性實施方式的避免繪制在canvas畫布中的圖形失真的計算設(shè)備包括一個或多個存儲器，存儲有可執(zhí)行指令；以及一個或多個處理器，執(zhí)行所述可執(zhí)行指令，以實現(xiàn)避免繪制在該canvas畫布中的圖形失真的方法

本發(fā)明實施例還提供了一種計算設(shè)備。所屬技術(shù)領(lǐng)域的技術(shù)人員能夠理解，本發(fā)明的各個方面可以實現(xiàn)為系統(tǒng)、方法或程序產(chǎn)品。因此，本發(fā)明的各個方面可以具體實現(xiàn)為以下形式，即：完全的硬件實施方式、完全的軟件實施方式(包括固件、微代碼等)，或硬件和軟件方面結(jié)合的實施方式，這里可以統(tǒng)稱為“電路”、“模塊”或“系統(tǒng)”。

在一些可能的實施方式中，根據(jù)本發(fā)明的計算設(shè)備可以至少包括至少一個處理單元、以及至少一個存儲單元。其中，所述存儲單元存儲有程序代碼，當(dāng)所述程序代碼被所述處理單元執(zhí)行時，使得所述處理單元執(zhí)行本說明書上述“示例性方法”部分中描述的根據(jù)本發(fā)明各種示例性實施方式的信息呈現(xiàn)方法中的步驟。例如，所述處理單元可以執(zhí)行如圖2中所示的步驟s201：獲取包含有數(shù)軸的配置信息的圖表配置信息；步驟s202：獲取用于繪制圖表的圖表數(shù)據(jù)；步驟s203：根據(jù)圖表數(shù)據(jù)對數(shù)軸的配置信息進行自適應(yīng)調(diào)整；以及操作s204，在數(shù)軸的配置信息自適應(yīng)調(diào)整完成后，展示圖表數(shù)據(jù)。

圖9示意性的示出了根據(jù)本發(fā)明實施例的避免繪制在canvas畫布中的圖形失真的計算設(shè)備的框圖。

如圖9所示的計算設(shè)備900僅僅是一個示例，不應(yīng)對本發(fā)明實施例的功能和使用范圍帶來任何限制。

如圖9所示，計算設(shè)備900以通用計算設(shè)備的形式表現(xiàn)。計算設(shè)備90的組件可以包括但不限于：上述至少一個處理單元901、上述至少一個存儲單元902、連接不同系統(tǒng)組件(包括存儲單元902和處理單元901)的總線903。

總線903表示幾類總線結(jié)構(gòu)中的一種或多種，包括存儲器總線或者存儲器控制器、外圍總線、圖形加速端口、處理器或者使用多種總線結(jié)構(gòu)中的任意總線結(jié)構(gòu)的局域總線。

存儲單元902可以包括易失性存儲器形式的可讀介質(zhì)，例如隨機存取存儲器(ram)9021和/或高速緩存存儲器9022，還可以進一步包括只讀存儲器(rom)9023。

存儲單元902還可以包括具有一組(至少一個)程序模塊9024的程序/實用工具9025，這樣的程序模塊9024包括但不限于：操作系統(tǒng)、一個或者多個應(yīng)用程序、其它程序模塊以及程序數(shù)據(jù)，這些示例中的每一個或某種組合中可能包括網(wǎng)絡(luò)環(huán)境的實現(xiàn)。

計算設(shè)備900也可以與一個或多個外部設(shè)備904(例如鍵盤、指向設(shè)備、藍牙設(shè)備等)通信，還可與一個或者多個使得用戶能與計算設(shè)備900交互的設(shè)備通信，和/或與使得計算設(shè)備900能與一個或多個其它計算設(shè)備進行通信的任何設(shè)備(例如路由器、調(diào)制解調(diào)器等等)通信。這種通信可以通過輸入/輸出(i/0)接口905進行。并且，計算設(shè)備900還可以通過網(wǎng)絡(luò)適配器906與一個或者多個網(wǎng)絡(luò)(例如局域網(wǎng)(lan)，廣域網(wǎng)(wan)和/或公共網(wǎng)絡(luò)，例如因特網(wǎng))通信。如圖所示，網(wǎng)絡(luò)適配器906通過總線903與計算設(shè)備900的其它模塊通信。應(yīng)當(dāng)明白，盡管圖中未示出，可以結(jié)合計算設(shè)備900使用其它硬件和/或軟件模塊，包括但不限于：微代碼、設(shè)備驅(qū)動器、冗余處理單元、外部磁盤驅(qū)動陣列、raid系統(tǒng)、磁帶驅(qū)動器以及數(shù)據(jù)備份存儲系統(tǒng)等。

應(yīng)當(dāng)注意，盡管在上文詳細(xì)描述中提及了裝置的若干單元/模塊或子單元/模塊，但是這種劃分僅僅是示例性的并非強制性的。實際上，根據(jù)本發(fā)明的實施方式，上文描述的兩個或更多單元/模塊的特征和功能可以在一個單元/模塊中具體化。反之，上文描述的一個單元/模塊的特征和功能可以進一步劃分為由多個單元/模塊來具體化。

此外，盡管在附圖中以特定順序描述了本發(fā)明方法的操作，但是，這并非要求或者暗示必須按照該特定順序來執(zhí)行這些操作，或是必須執(zhí)行全部所示的操作才能實現(xiàn)期望的結(jié)果。附加地或備選地，可以省略某些步驟，將多個步驟合并為一個步驟執(zhí)行，和/或?qū)⒁粋€步驟分解為多個步驟執(zhí)行。

雖然已經(jīng)參考若干具體實施方式描述了本發(fā)明的精神和原理，但是應(yīng)該理解，本發(fā)明并不限于所公開的具體實施方式，對各方面的劃分也不意味著這些方面中的特征不能組合以進行受益，這種劃分僅是為了表述的方便。本發(fā)明旨在涵蓋所附權(quán)利要求的精神和范圍內(nèi)所包括的各種修改和等同布置。