今天讲讲如何利用canvas绘制弯曲的图形,先看demo:

关键思路

主要思路就是先绘制出杯子的轮廓,然后将对应位置比例的图片贴上去。先来绘制带有上下半椭圆的形状:

background Layer 1 原图 上下弯曲图

看上图我们可以知道我们只需要把原图按照竖形切割,然后绘制出具有上下半椭圆的形状,把对应位置的图片贴过来就好了,现在来看看如何绘制具有上下半圆的这个形状:

background Layer 1 a b offsetX offsetY x轴 y轴 canvas 上图中的椭圆长轴为a,短轴为b,中心点坐标为(a,0),椭圆在canvas的偏移量为(offsetX,offsetY) 上图中椭圆的方程式为(x-a)^2/a^2+y^2/b^2=1,x范围为[0,2*a],求出y和x的关系: (x-a)^2*b^2+y^2*a^2=a^2*b^2 y^2*a^2=a^2*b^2-(x-a)^2*b^2 y^2*a^2=b^2*(a^2-(x-a)^2) y*a=正负b*Math.sqrt(a^2-(x-a)^2) y=正负b/a*Math.sqrt(a^2-(x-a)^2) 最终的结果为x在[0,2*a]之间,y和x的关系为y=b/a*Math.sqrt(a^2-(x-a)^2)(这里我们取的是正y)

看了上面的椭圆的计算方式,还有下面一个椭圆,下面一个椭圆就稍微简单点,看看它和上面的椭圆有什么关系:

background Layer 1 a b offsetX offsetY x轴 y轴 canvas y y1 y1和y的关系为y1=200+y/2,其中的200可以自己根据实际情况去调整,y/2表示下面也是一个椭圆 但是可能没有上面那么高,因此y/2表示一个比上面小一点的椭圆,y/2这个可以根据实际情况去调整 如果下面的椭圆比上面大,就又能是y*2,根据事情情况去调整。

看看上下椭圆的对应demo:

刚才大致了解对于椭圆是如何切割的,现在看看椭圆+斜边是如何切割的,这个相比只是椭圆切割要复杂一点,会同时对垂直进行切割:

background Layer 1 原图 上下弯曲图+斜边

现在来看看左右两根线的方程,一个是y=10*x,一个是y=20*a-10*x;

background Layer 1 a b offsetX offsetY x轴 y轴 canvas y=10*x y=2*10*a-10*x

在绘制的时候我们水平上还是[0,2*a]区域,但是在绘制y的时候,只绘制处于y=10*x和y=20*a-10*x之内的区域。

最后绘制完的区域有比较明显的锯齿,因此最后我们要绘制一些线段将那些锯齿遮住。

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字