CN107204023A - 避免绘制在canvas画布中的图形失真的方法和装置 - Google Patents

Abstract

本发明的实施方式提供了一种避免绘制在canvas画布中的图形失真的方法。该方法包括：计算所述canvas画布的总伸缩比Ratio，所述总伸缩比Ratio表示当所述canvas画布的逻辑尺寸与其以设备独立像素度量的尺寸一致时，所述canvas画布在屏幕上所占的像素数量与其内存像素数量之比；设置所述canvas画布的逻辑尺寸为其以设备独立像素度量的尺寸与所述总伸缩比Ratio的乘积。通过使canvas画布的逻辑尺寸为其以设备独立像素度量的尺寸与所述总伸缩比Ratio的乘积，本发明的方法使得在不同的设备上、和/或不同的浏览器的缩放程度时，绘制在canvas画布上的图形都不会发生显示失真，为用户带来了更好的体验。此外，本发明的实施方式提供了一种避免绘制在canvas画布中的图形失真的介质、装置和计算设备。

Description

避免绘制在canvas画布中的图形失真的方法和装置

技术领域

本发明的实施方式涉及互联网领域，更具体地，本发明的实施方式涉及一种避免绘制在canvas画布中的图形失真的方法、介质、装置和计算设备。

背景技术

本部分旨在为权利要求书中陈述的本发明的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。

在网页实时生成图像中，canvas画布得到了非常广泛的应用。

发明内容

但是，现有技术中由于不同的设备的配置不同、对canvas画布进行存储的机制不同、和/或浏览器的缩放程度不同，常常会导致绘制到canvas画布上的图形出现失真现象，从而变得不清晰。

因此在现有技术中，这是非常令人烦恼的过程。

为此，非常需要一种改进的解决途径，以使绘制在canvas画布、上的图形在在不同的设备上、和/或不同的浏览器的缩放程度时，都能够清晰地显示图形，而不发生失真。

在本上下文中，本发明的实施方式期望提供一种避免绘制在canvas画布中的图形失真的方法、介质、装置和计算设备。

在本发明实施方式的第一方面中，提供了一种避免绘制在canvas画布中的图形失真的方法，该canvas画布在屏幕上所占的像素数量与其以设备独立像素度量的尺寸成正比，该canvas画布的内存像素数量与该canvas画布的逻辑尺寸成正比，该内存像素数量是用于保存该canvas画布的像素信息的内存空间所对应的像素数量，该方法包括：计算该canvas画布的总伸缩比Ratio，该总伸缩比Ratio表示当该canvas画布的逻辑尺寸与其以设备独立像素度量的尺寸一致时，该canvas画布在屏幕上所占的像素数量与其内存像素数量之比；设置该canvas画布的逻辑尺寸为其以设备独立像素度量的尺寸与该总伸缩比Ratio的乘积，以使绘制在该canvas画布中的图形在屏幕上所占的像素数量与其内存像素数量相等。

在本发明的一个实施例中，该总伸缩比Ratio＝设备独立像素比/缓存像素内存比，其中，该设备独立像素比为该canvas画布的设备像素与其设备独立像素之比，该缓存像素内存比为该canvas画布的内存像素数量与其逻辑尺寸之比。

在本发明的另一实施例中，在计算该canvas画布的总伸缩比Ratio之前，还包括根据浏览器的当前状态，获取该设备独立像素比。

在本发明的又一个实施例中，该方法还包括：通过将图形的以设备独立像素度量的第一位置坐标和第一尺寸分别乘以该总伸缩比Ratio获得第二位置坐标和第二尺寸；根据第二位置坐标和第二尺寸将该图形绘制在该canvas画布中。

在本发明的再一个实施例中，该方法还包括：确定该图形以设备独立像素度量的第一位置坐标和第一尺寸。

在本发明实施方式的第二方面中，提供了一种计算机可读存储介质，其上存储有可执行指令，该指令在被处理器执行时使处理器执行上述的避免绘制在canvas画布中的图形失真的方法。

在本发明实施方式的第三方面中，提供了一种避免绘制在canvas画布中的图形失真的装置，该canvas画布在屏幕上所占的像素数量与其以设备独立像素度量的尺寸成正比，该canvas画布的内存像素数量与该canvas画布的逻辑尺寸成正比，该内存像素数量是用于保存该canvas画布的像素信息的内存空间所对应的像素数量，该装置包括：总伸缩比计算模块，用于计算该canvas画布的总伸缩比Ratio，该总伸缩比Ratio表示当该canvas画布的逻辑尺寸与其以设备独立像素度量的尺寸一致时，该canvas画布在屏幕上所占的像素数量与其内存像素数量之比；画布的逻辑尺寸设置模块，设置该canvas画布的逻辑尺寸为其以设备独立像素度量的尺寸与该总伸缩比Ratio的乘积，以使绘制在该canvas画布中的图形在屏幕上所占的像素数量与其内存像素数量相等。

在本发明的一个实施例中，所述总伸缩比Ratio＝设备独立像素比/缓存像素内存比，其中，所述设备独立像素比为所述canvas画布的设备像素与其设备独立像素之比，所述缓存像素内存比为所述canvas画布的内存像素数量与其逻辑尺寸之比。

在本发明的另一个实施例中，该装置还包括设备独立像素比获取模块，用于根据浏览器的当前状态获取所述设备独立像素比。

在本发明的又一个实施例中，该装置还包括画布中的图形定位模块和图形绘制模块。其中，画布中的图形定位模块用于通过将图形的以设备独立像素度量的第一位置坐标和第一尺寸分别乘以所述总伸缩比Ratio获得第二位置坐标和第二尺寸。图形绘制模块用于根据第二位置坐标和第二尺寸将所述图形绘制在所述canvas画布中。

在本发明的再一个实施例中，还包括以设备独立像素度量的图形定位模块，用于确定所述图形以设备独立像素度量的第一位置坐标和第一尺寸。

在本发明实施方式的第四方面中，提供了一种计算设备，包括：一个或多个存储器，存储有可执行指令；以及一个或多个处理器，执行该可执行指令，以实现上述的避免绘制在canvas画布中的图形失真的方法。

根据本发明实施方式的方法、介质、装置和计算设备，可以至少地实现在不同的设备上、和/或不同的浏览器的缩放程度时，绘制在canvas画布上的图像都不会发生显示失真，为用户带来了更好的体验。

附图说明

通过参考附图阅读下文的详细描述，本发明示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本发明的若干实施方式，其中：

图1示意性地示出了根据本发明实施方式的应用场景示意图；

图2示意性地示出了根据本发明实施例的避免绘制在canvas画布中的图形失真的方法的实施流程示意图；

图3a、图3b示意性地示出了根据本发明实施例的避免绘制在canvas画布中的图形失真的方法的实现原理图；

图4示意性地示出了根据本发明另一实施例的避免绘制在canvas画布中的图形失真的方法的实施流程示意图；

图5示意性地示出了根据本发明又一实施例的避免绘制在canvas画布中的图形失真的方法的实施流程示意图；

图6示意性地示出了根据本发明再一实施例的避免绘制在canvas画布中的图形失真的方法的实施流程示意图；

图7示意性地示出了根据本发明实施例的避免绘制在canvas画布中的图形失真的程序产品示意图；

图8示意性地示出了根据本发明实施例的避免绘制在canvas画布中的图形失真的装置的框图；以及

图9示意性的示出了根据本发明实施例的避免绘制在canvas画布中的图形失真的计算设备的框图。

在附图中，相同或对应的标号表示相同或对应的部分。

具体实施方式

下面将参考若干示例性实施方式来描述本发明的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本发明，而并非以任何方式限制本发明的范围。相反，提供这些实施方式是为了使本发明更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

本领域技术人员知道，本发明的实施方式可以实现为一种系统、装置、设备、方法或计算机程序产品。因此，本发明可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。

根据本发明的实施方式，提出了一种避免绘制在canvas画布中的图形失真的方法、介质、装置和计算设备。

在本文中，需要理解的是，所涉及的术语失真表示绘制在canvas画布中的图形在屏幕上显示时模糊不清。此外，附图中的任何元素数量均用于示例而非限制，以及任何命名都仅用于区分，而不具有任何限制含义。

下面参考本发明的若干代表性实施方式，详细阐释本发明的原理和精神。

发明概述

本发明人发现，绘制到canvas画布中的图形失真是由于该canvas画布在屏幕上所占的像素数量与该canvas画布的内存像素数量不一致导致的，其中该canvas画布的内存像素数量是用于保存该canvas画布的像素信息的内存空间所对应的像素数量。因为在浏览器将canvas画布中的图形渲染到屏幕上时，是将该canvas画布的内存像素中的信息渲染到屏幕上。因此，当该canvas画布的内存像素数量和该canvas画布在屏幕上所占的像素数量不对应时，就会发生图形失真。

据此可以推知，如果对于任何设备和/或浏览器的缩放情况，只要能使得其中的canvas画布的内存像素数量和其在屏幕上所占的像素数量始终保持一一对应关系，那么绘制到该canvas画布中的图形在屏幕上显示时就不会失真。

在介绍了本发明的基本原理之后，下面具体介绍本发明的各种非限制性实施方式。

应用场景总览

首先参考图1

图1示意性地示出了根据本发明实施方式的应用场景示意图。

如图1所示，用户终端11中安装有浏览器，用户通过用户终端11中安装的浏览器向网站服务器12发送网页获取请求，网站服务器12将用户请求的网页发送给用户终端11，由用户终端11中安装的浏览器对接收到的网页信息进行展示，其中网页中实时生成图像通过canvas绘制而成。

用户终端11和网站服务器12通过网络连接，该网络可以为局域网、广域网、移动互联网等。用户终端11可以为便携设备(例如：手机、平板、笔记本电脑等)，也可以为个人电脑(PC，Personal Computer)，网站服务器12可以为任何能够提供网站服务的服务器设备。

示例性方法

下面结合图1的应用场景，参考图2来描述根据本发明示例性实施方式的避免绘制在canvas画布中的图形失真的方法。需要注意的是，上述应用场景仅是为了便于理解本发明的精神和原理而示出，本发明的实施方式在此方面不受任何限制。相反，本发明的实施方式可以应用于适用的任何场景。

图2示意性地示出了根据本发明实施例的避免绘制在canvas画布中的图形失真的方法的实施流程示意图。

如图2所示，根据本发明实施例的避免绘制在canvas画布中的图形失真的方法包括步骤S201和S202。

具体地，根据本发明实施例的避免绘制在canvas画布中的图形失真的方法中，该canvas画布在屏幕上所占的像素数量与其以设备独立像素度量的尺寸成正比，该canvas画布的内存像素数量与该canvas画布的逻辑尺寸成正比，该内存像素数量是用于保存该canvas画布的像素信息的内存空间所对应的像素数量。

在步骤S201，计算该canvas画布的总伸缩比Ratio，该总伸缩比Ratio表示当该canvas画布的逻辑尺寸与其以设备独立像素度量的尺寸一致时，该canvas画布在屏幕上所占的像素数量与其内存像素数量之比。

在步骤S202，设置该canvas画布的逻辑尺寸为其以设备独立像素度量的尺寸与该总伸缩比Ratio的乘积，以使绘制在该canvas画布中的图形在屏幕上所占的像素数量与其内存像素数量相等。

为更好地理解本发明实施例的避免绘制在canvas画布中的图形失真的方法，请参考图3a和图3b中的示意性描述。

图3a、图3b示意性地示出了根据本发明实施例的避免绘制在canvas画布中的图形失真的方法的实现原理图。

在图3a示意性示出了同一个canvas画布的三种度量形式：分别是canvas画布301-1，其大小为以设备独立像素度量的尺寸、canvas画布301-21，其大小为逻辑尺寸；canvas画布301-3，其大小为在屏幕中展示的尺寸。

需要说明的是，在实际中，只有canvas画布301-3是用户可以真实看到的画布，而canvas画布301-1和canvas画布301-21是在设置该canvas画布尺寸时用于计算的一种抽象的概念，并不会是用户真实能够看到的canvas画布，在图3a中为了便于说明该canvas画布的各种度量形式之间的逻辑关系，用具有一定面积的图形示意性地表示出canvas画布301-1和canvas画布301-21，其中表示canvas画布301-1的图形的大小与该canvas画布的以设备独立像素度量的尺寸相对应，表示canvas画布301-21的图形的大小与该canvas画布的逻辑尺寸相对应。

其中，设备独立像素是计算机坐标系中的一点，与设备无关，是程序可用的虚拟像素，比如cascading style sheets层叠表样式像素(简称CSS像素)。以设备独立像素度量的尺寸例如是在该canvas画布设置时canvas.style.width对应的画布宽度、和canvas.style.height对应的画布高度。

逻辑尺寸是该canvas画布的尺寸属性，例如，可以是通过canvas.width和canvas.height分别设置的canvas画布的宽度和高度。

在屏幕上展示的canvas画布的尺寸是根据浏览器将该canvas画布渲染到屏幕上时在屏幕上所占的像素数量来确定的尺寸。

另外，图3a中还示意性表示出该canvas画布占用的内存空间302-1，其表示的是用于保存该canvas画布的像素信息的内存空间，该内存空间所对应的像素数量就是该canvas画布的内存像素数量。

可以理解的是，图3a中该canvas画布占用的内存空间302-1被示意性地表示为一个具有一定尺寸的图形，是为了便于说明该canvas画布的内存像素数量与其各种度量形式之间的逻辑关系。图3a表示内存空间302-1图形的大小与该canvas画布的内存像素数量相对应。

根据本发明实施例，该canvas画布在屏幕上所占的像素数量与其以设备独立像素度量的尺寸成正比。

如图3a所示，屏幕上展示的canvas画布301-3的尺寸大小与以设备独立像素度量的尺寸展示的canvas画布301-1的尺寸大小成正比，例如图中所示的这个比例系数为A，比例系数A可以是任意的正数。换言之，以设备独立像素度量的尺寸展示的canvas画布301-1越大，在屏幕上展示的canvas画布301-3的尺寸也会越大。

根据本发明实施例，该canvas画布的内存像素数量与其的逻辑尺寸成正比。

因此，该canvas画布的内存像素数量与以逻辑尺寸展示的canvas画布301-21的大小成正比，例如图中所示的这个比例系数为B，比例系数B也可以是任意的正数。这样，图3a中以逻辑尺寸展示的canvas画布301-21越大，该canvas画布占用的内存空间302-1也会越大。

在操作S201，计算该canvas画布的总伸缩比Ratio。该总伸缩比Ratio表示当该canvas画布的逻辑尺寸与其以设备独立像素度量的尺寸一致时，该canvas画布在屏幕上所占的像素数量与其内存像素数量之比。

具体地，该canvas画布的逻辑尺寸与其以设备独立像素度量的尺寸一致，在图3a中示意性地表示为以设备独立像素度量的尺寸展示的canvas画布301-1和以逻辑尺寸展示的canvas画布301-21大小一致。此时，canvas画布301的总伸缩比Ratio就是canvas画布301-3在屏幕上所占的像素数量与内存空间302-1所对应的内存像素数量之比，例如，图3a中示意性表示为在canvas画布301-3与内存空间302-1的尺寸之比。

在操作S202，设置canvas画布301的逻辑尺寸为其以设备独立像素度量的尺寸与该总伸缩比Ratio的乘积。

具体地，参考图3b，以设备独立像素度量的尺寸展示的canvas画布301-1和在屏幕上展示的canvas画布301-3的大小均不变。

此时，设置canvas画布301的逻辑尺寸为其以设备独立像素度量的尺寸与该总伸缩比Ratio的乘积，即图3b的示例中以逻辑尺寸展示的canvas画布301-22的大小为canvas画布301-1的Ratio倍。

由于在图3a中以逻辑尺寸展示的canvas画布301-21的大小与以设备独立像素度量的尺寸展示的canvas画布301-1的大小相同。因此，相当于canvas画布301-22变为canvas画布301-21的Ratio倍。对应于以逻辑尺寸展示的canvas画布301-22，其在内存像素数量也相应地变为原来的Ratio倍。即，在图3b中内存空间302-2变为图3a中的内存空间302-1的Ratio倍。

此时，如图3b示意性地表示，在屏幕上显示的canvas画布301-3与在内存空间302-2的大小一致。即经过步骤S202的设置，该canvas画布在屏幕上所占的像素数量与其内存像素数量相等。

从而，当浏览器将绘制到该canvas画布中的图形渲染到屏幕上时，可以将保存该canvas画布的像素信息的内存空间中的像素一一对应地渲染到屏幕的像素中，从而能够保证在屏幕显示中绘制到该canvas画布中的图形不会失真。

根据本发明的实施例，对于任何设备和/或浏览器的缩放情况，通过计算该canvas画布的总伸缩比Ratio，并设置该canvas画布的逻辑尺寸为其以设备独立像素度量的尺寸与该总伸缩比Ratio的乘积，就能够使得绘制在该canvas画布中的图形在屏幕上所占的像素数量与其内存像素数量相等，从而避免绘制在canvas画布中的图形失真。

根据本发明实施例，计算canvas画布的总伸缩比Ratio，可以根据其物理意义，获取到当该canvas画布的逻辑尺寸与其以设备独立像素度量的尺寸一致时，该canvas画布在屏幕上所占的像素数量和该canvas画布内存像素数量，然后通过二者的比值计算得到总伸缩比Ratio。

根据本发明实施例，计算该canvas画布的总伸缩比Ratio，也可以根据设备独立像素比和缓存像素内存比间接计算得到。

具体地，该canvas画布的总伸缩比Ratio＝设备独立像素比/缓存像素内存比，其中，该设备独立像素比为该canvas画布的设备像素与其设备独立像素之比，该缓存像素内存比为该canvas画布的内存像素数量与其逻辑尺寸之比。

具体地，该canvas画布的总伸缩比Ratio＝设备独立像素比/缓存像素内存比的原因解释如下：

当该canvas画布的逻辑尺寸与其以设备独立像素度量的尺寸相等时时，在式(1)“canvas画布以设备独立像素度量的尺寸”替换“canvas画布的逻辑尺寸”，可以进一步得到式(1)的表达式为：

根据式(2)可以看出，“设备独立像素比/缓存像素内存比”的物理意义为当该canvas画布的逻辑尺寸与其以设备独立像素度量的尺寸一致时，该canvas画布在屏幕上所占的像素数量与其内存像素数量之比。

因此：

Ratio＝设备独立像素比/缓存像素内存比 (3)

根据本发明实施例，根据设备独立像素比和缓存像素内存比间接计算总伸缩比Ratio，简化了操作S201中计算总伸缩比Ratio的过程，提高了根据本发明实施例的避免绘制在canvas画布中的图形失真的方法的应用效率。

图4示意性地示出了根据本发明另一实施例的避免绘制在canvas画布中的图形失真的方法的实施流程示意图。

如图4所示，根据本发明另一实施例的避免绘制在canvas画布中的图形失真的方法在步骤S201和步骤S202之前，还包括步骤S401。

在步骤S401，根据浏览器的当前状态，获取设备独立像素比。

浏览器的缩放程度会改变展示该canvas画布的设备像素。根据浏览器的当前状态，获取到设备独立像素比，为操作S201计算总压缩比Ratio提供数据。

根据本发明的实施例，当浏览器放大或缩小时，就要按照图4所示的步骤来设置该canvas画布的逻辑尺寸，从而避免绘制在该canvas画布中的图形失真。

图5示意性地示出了根据本发明又一实施例的避免绘制在canvas画布中的图形失真的方法的实施流程示意图。

如图5所示，根据本发明又一实施例的避免绘制在canvas画布中的图形失真的方法在步骤S201和步骤S202之后，还包括步骤S503和步骤S504。

在步骤S503，通过将图形的以设备独立像素度量的第一位置坐标和第一尺寸分别乘以该总伸缩比Ratio获得第二位置坐标和第二尺寸；

在步骤S504，根据第二位置坐标和第二尺寸将该图形绘制在该canvas画布中。

根据本发明实施例，通过将图形的第一位置坐标和第一尺寸分别乘以总伸缩臂Ratio获得第二位置坐标和第二尺寸，根据第二位置坐标和第二尺寸将该图形绘制在该canvas画布中。这样，该canvas画布的逻辑尺寸是其以设备独立像素度量的尺寸的Ratio倍，绘制在该canvas画布中的图形的位置和尺寸也是设备独立像素度量的尺寸的Ratio倍，从而保证了绘制在该canvas画布中的图形是在以设备独立像素度量的计算空间中获得图形的等比例变换。以此方式，在保证用户看到的绘制在该canvas画布中的图形不失真的同时，不会使用户感到图形的大小有任何不适应之处，从而提升了用户体验。

图6示意性地示出了根据本发明再一实施例的避免绘制在canvas画布中的图形失真的方法的实施流程示意图。

如图6所示，根据本发明再一实施例的避免绘制在canvas画布中的图形失真的方法在步骤S201、步骤S202、步骤S503和步骤S504外，还包括步骤S603。

在步骤S603，确定图形以设备独立像素度量的第一位置坐标和第一尺寸。

可以理解的是，图6中步骤S603位于步骤S202之后和步骤S503之前仅是示例。事实上，步骤S603可以位于S503之前的任何时候。也即步骤S603与步骤S201和步骤S202之间相互独立，没有先后顺序之分。

根据本发明的实施例，要在该canvas画布中绘制新的图形时，需要先通过步骤S603确定图形以设备独立像素度量的第一位置坐标和第一尺寸。然后通过按照步骤S503和S504将图形绘制在该canvas画布中。

示例性介质

在介绍了本发明示例性实施方式的方法之后，接下来，参考图7对本发明示例性实施方式的避免绘制在canvas画布中的图形失真的程序产品进行描述。

如图7所示，根据本发明实施例的避免绘制在canvas画布中的图形失真的程序产品700中存储有可执行指令，当该可执行指令被处理器执行时使处理器执行参考图2以及图4～图6的方法。

在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在计算设备上运行时，所述程序代码用于使所述计算设备执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施方式的用于图表的数据处理方法中的步骤，例如，所述计算设备可以执行如图2中所示的步骤S201：计算该canvas画布的总伸缩比Ratio；步骤S202：设置该canvas画布的逻辑尺寸为其以设备独立像素度量的尺寸与该总伸缩比Ratio的乘积。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

根据本发明的实施方式的避免绘制在该canvas画布中的图形失真的程序产品700，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在计算设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括——但不限于——电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于——无线、有线、光缆，RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言——诸如Java，C++等，还包括常规的过程式程序设计语言——诸如“C”，语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)一连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

示例性装置

在介绍了本发明示例性实施方式的介质之后，接下来，参考图8对本发明示例性实施方式的避免绘制在canvas画布中的图形失真的装置进行描述。

图8示意性地示出了根据本发明实施例的避免绘制在canvas画布中的图形失真的装置的框图。

如图8所示，根据本发明实施例的避免绘制在canvas画布中的图形失真的装置800包括总伸缩比计算模块810，画布的逻辑尺寸设置模块820。

总伸缩臂计算模块810，用于计算该canvas画布的总伸缩比Ratio。

根据本发明的实施例，总伸缩比Ratio＝设备独立像素比/缓存像素内存比。

画布的逻辑尺寸设置模块820，用于设置该canvas画布的逻辑尺寸为其以设备独立像素度量的尺寸与该总伸缩比Ratio的乘积。

根据本发明实施例的装置800，对于任何设备和/或浏览器的缩放情况，通过计算canvas画布的总伸缩比Ratio，并设置该canvas画布的逻辑尺寸为其以设备独立像素度量的尺寸与该总伸缩比Ratio的乘积，就能够使得绘制在该canvas画布中的图形在屏幕上所占的像素数量与其内存像素数量相等，从而避免绘制在canvas画布中的图形失真。

根据本发明实施例的装置800还可以包括设备独立像素比获取模块830，用于根据浏览器的当前状态获取该设备独立像素比。

根据本发明实施例的装置800还可以包括画布中的图形定位模块840和图形绘制模块850。

画布中的图形定位模块840，用于通过将图形的以设备独立像素度量的第一位置坐标和第一尺寸分别乘以该总伸缩比Ratio获得第二位置坐标和第二尺寸。

图形绘制模块850，用于根据第二位置坐标和第二尺寸将该图形绘制在该canvas画布中。

通过画布中的图形定位模块840和图形绘制模块850，保证了绘制在该canvas画布中的图形是在以设备独立像素度量的计算空间中获得图形的等比例变换。以此方式，在保证用户看到的绘制在该canvas画布中的图形不失真的同时，不会使用户感到图形的大小有任何适应之处，从而提升了用户体验。

根据本发明实施例的装置800还可以包括以设备独立像素度量的图形定位模块860，用于确定所述图形以设备独立像素度量的第一位置坐标和第一尺寸。通过以设备独立像素度量的图形定位模块860，在canvas画布绘制新的图形时，可以确定出该图形以设备独立像素度量的第一位置坐标和第一尺寸。

示例性计算设备

在介绍了本发明示例性实施方式的方法、介质和装置之后，接下来，参考图9对本发明示例性实施方式的避免绘制在canvas画布中的图形失真的计算设备进行描述。

本发明示例性实施方式的避免绘制在canvas画布中的图形失真的计算设备包括一个或多个存储器，存储有可执行指令；以及一个或多个处理器，执行所述可执行指令，以实现避免绘制在该canvas画布中的图形失真的方法

本发明实施例还提供了一种计算设备。所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。

在一些可能的实施方式中，根据本发明的计算设备可以至少包括至少一个处理单元、以及至少一个存储单元。其中，所述存储单元存储有程序代码，当所述程序代码被所述处理单元执行时，使得所述处理单元执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施方式的信息呈现方法中的步骤。例如，所述处理单元可以执行如图2中所示的步骤S201：获取包含有数轴的配置信息的图表配置信息；步骤S202：获取用于绘制图表的图表数据；步骤S203：根据图表数据对数轴的配置信息进行自适应调整；以及操作S204，在数轴的配置信息自适应调整完成后，展示图表数据。

图9示意性的示出了根据本发明实施例的避免绘制在canvas画布中的图形失真的计算设备的框图。

如图9所示的计算设备900仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图9所示，计算设备900以通用计算设备的形式表现。计算设备90的组件可以包括但不限于：上述至少一个处理单元901、上述至少一个存储单元902、连接不同系统组件(包括存储单元902和处理单元901)的总线903。

总线903表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器、外围总线、图形加速端口、处理器或者使用多种总线结构中的任意总线结构的局域总线。

存储单元902可以包括易失性存储器形式的可读介质，例如随机存取存储器(RAM)9021和/或高速缓存存储器9022，还可以进一步包括只读存储器(ROM)9023。

存储单元902还可以包括具有一组(至少一个)程序模块9024的程序/实用工具9025，这样的程序模块9024包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

计算设备900也可以与一个或多个外部设备904(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与计算设备900交互的设备通信，和/或与使得计算设备900能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/0)接口905进行。并且，计算设备900还可以通过网络适配器906与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器906通过总线903与计算设备900的其它模块通信。应当明白，尽管图中未示出，可以结合计算设备900使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

应当注意，尽管在上文详细描述中提及了装置的若干单元/模块或子单元/模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多单元/模块的特征和功能可以在一个单元/模块中具体化。反之，上文描述的一个单元/模块的特征和功能可以进一步划分为由多个单元/模块来具体化。

此外，尽管在附图中以特定顺序描述了本发明方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

虽然已经参考若干具体实施方式描述了本发明的精神和原理，但是应该理解，本发明并不限于所公开的具体实施方式，对各方面的划分也不意味着这些方面中的特征不能组合以进行受益，这种划分仅是为了表述的方便。本发明旨在涵盖所附权利要求的精神和范围内所包括的各种修改和等同布置。

Claims (10)

1.一种避免绘制在canvas画布中的图形失真的方法，所述canvas画布在屏幕上所占的像素数量与其以设备独立像素度量的尺寸成正比，所述canvas画布的内存像素数量与所述canvas画布的逻辑尺寸成正比，所述内存像素数量是用于保存所述canvas画布的像素信息的内存空间所对应的像素数量，所述方法包括：

计算所述canvas画布的总伸缩比Ratio，所述总伸缩比Ratio表示当所述canvas画布的逻辑尺寸与其以设备独立像素度量的尺寸一致时，所述canvas画布在屏幕上所占的像素数量与其内存像素数量之比；

设置所述canvas画布的逻辑尺寸为其以设备独立像素度量的尺寸与所述总伸缩比Ratio的乘积，以使绘制在所述canvas画布中的图形在屏幕上所占的像素数量与其内存像素数量相等。

2.如权利要求1所述的方法，其中：

所述总伸缩比Ratio＝设备独立像素比/缓存像素内存比，其中，所述设备独立像素比为所述canvas画布的设备像素与其设备独立像素之比，所述缓存像素内存比为所述canvas画布的内存像素数量与其逻辑尺寸之比。

3.如权利要求2所述的方法，在计算所述canvas画布的总伸缩比Ratio之前，还包括：

根据浏览器的当前状态，获取所述设备独立像素比。

4.如权利要求1～3任意一项所述的方法，还包括：

通过将图形的以设备独立像素度量的第一位置坐标和第一尺寸分别乘以所述总伸缩比Ratio获得第二位置坐标和第二尺寸；

根据第二位置坐标和第二尺寸将所述图形绘制在所述canvas画布中。

5.如权利要求4所述的方法，还包括：

确定所述图形以设备独立像素度量的第一位置坐标和第一尺寸。

6.一种计算机可读存储介质，其上存储有可执行指令，所述指令在被处理器执行时使处理器执行权利要求1～5任意一项所述的方法。

7.一种避免绘制在canvas画布中的图形失真的装置，所述canvas画布在屏幕上所占的像素数量与其以设备独立像素度量的尺寸成正比，所述canvas画布的内存像素数量与所述canvas画布的逻辑尺寸成正比，所述内存像素数量是用于保存所述canvas画布的像素信息的内存空间所对应的像素数量，所述装置包括：

总伸缩比计算模块，用于计算所述canvas画布的总伸缩比Ratio，所述总伸缩比Ratio表示当所述canvas画布的逻辑尺寸与其以设备独立像素度量的尺寸一致时，所述canvas画布在屏幕上所占的像素数量与其内存像素数量之比；

画布的逻辑尺寸设置模块，用于设置所述canvas画布的逻辑尺寸为其以设备独立像素度量的尺寸与所述总伸缩比Ratio的乘积，以使绘制在所述canvas画布中的图形在屏幕上所占的像素数量与其内存像素数量相等。

8.如权利要求7所述的装置，其中：

所述总伸缩比Ratio＝设备独立像素比/缓存像素内存比，其中，所述设备独立像素比为所述canvas画布的设备像素与其设备独立像素之比，所述缓存像素内存比为所述canvas画布的内存像素数量与其逻辑尺寸之比。

9.如权利要求8所述的装置，还包括：

设备独立像素比获取模块，用于根据浏览器的当前状态获取所述设备独立像素比。

10.一种计算设备，包括：

一个或多个存储器，存储有可执行指令；以及

一个或多个处理器，执行所述可执行指令，以实现权利要求1～5任意一项所述的方法。