[发明专利]一种绘制海报的方法

说明书

本发明涉及互联网前端领域，具体提供了一种绘制海报的方法，在浏览器提供的画布canvas接口的基础上进行实现，对画布元素和画布背景进行调整,保证一个物理像素对应一个CSS像素,同时进行设备大小的缩放。与现有技术相比，本发明可以解决网页绘制转画布时，现有插件的兼容问题；还可以解决手绘画布时，基本接口和原始绘制方法存在的绘制失真问题。仅需要调用封装代码就可以实现设备适配以及精度优化的问题。

技术领域

本发明涉及互联网前端领域，具体提供一种绘制海报的方法。

背景技术

在互联网蓬勃发展的今天，互联网产品的推广成了各个互联网公司抢占市场的重要手段，依靠现有客户分享个性化的海报拉取新用户更是常见手段。现有的技术方向就主要包括通过网页的绘制转成画布从而导出图片以及直接通过画布绘制从而导出图片。尽管通过网页绘制转画布的方法有着各种各样的实现插件，但是或多或少的都存在兼容性问题。而通过画布直接绘制的方法也会存在一定的失真问题。

发明内容

本发明是针对上述现有技术的不足，提供一种实用性强的绘制海报的方法。

本发明解决其技术问题所采用的技术方案是：

一种绘制海报的方法，在浏览器提供的画布canvas接口的基础上进行实现，对画布元素和画布背景进行调整,保证一个物理像素对应一个CSS像素,同时进行设备大小的缩放。

进一步的，对画布元素给定固定高度和宽度，给画布背景设置一个设备像素比、乘固定高度和宽度的大小，即在一张放大的设备像素比倍数大小的画布上绘制。

进一步的，在一张放大的设备像素比倍数大小的画布上绘制后，再缩小设备像素比倍数、之后放在原大小的画布框里。

进一步的，按照画布渲染机制，画布在渲染像素宽度时会从中线向两边扩展，即单边宽度会变成一半。

进一步的，在渲染机制中，像素不能是小数，所以就会四舍五入，通过画布先放大绘制再缩小就可把约取的损失降低。

作为优选，保证一个物理像素对应一个CSS像素,CSS像素与物理像素之比即设备像素比。

进一步的，画布背景被放大，所有的绘制图像位置大小要素都要按同比例放大，这就要调用画布的缩放接口，一次性把所有背景上的图像绘制全部按比例放大。

进一步的，在设备大小的缩放中，参考宽度缩放比和高度缩放比的最小值，画布元素大小设置和画布背景大小设置以及画布缩放比例都应该乘以这个最小缩放比。

本发明的一种绘制海报的方法和现有技术相比，具有以下突出的有益效果：

本发明可以解决网页绘制转画布时，现有插件的兼容问题；还可以解决手绘画布时，基本接口和原始绘制方法存在的绘制失真问题。仅需要调用封装代码就可以实现设备适配以及精度优化的问题。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

附图1是一种绘制海报的方法中物理像素与CSS像素转化示意图。

具体实施方式

为了使本技术领域的人员更好的理解本发明的方案，下面结合具体的实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例都属于本发明保护的范围。

下面给出一个最佳实施例：