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

    canvas绘制图片到杯子上

    关键思路

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

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

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

    看看上下椭圆的对应demo:

    canvas绘制图片到上下椭圆

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

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

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

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

    DEMO下载

    点击下载[0积分]一共下载0
    回到顶部
    我要评论

    所有评论

      相关文章