本文所有代码均为swift，但即使你只是一个OCer，我保证你也不会看不懂。
HTML5画图使用canvas，而在iOS中没有canvas，要想画图，就必须用到UIBezierPath和CAShapeLayer了，UIBezierPath用来控制显示的路径，CAShapeLayer则用来表现，两者结合，我们几乎可以为所欲为，先来看一个效果图：

penguin.gif

文章最后附上demo地址

GIF有点掉帧，实际运行效果会好点。这个动画看起来略显酷炫（😂），但其实用到的东西很简单，就是UIBezierpath的简单运用，我们一步一步来。

一、UIBezierpath

我们先来看一下它的初始化方法都有哪些：

    //public convenience init(rect: CGRect)  根据rect初始化一个path
        let path0 = UIBezierPath(rect: CGRectMake(30, 100, 100, 40));
        let layer0 = CAShapeLayer();
        layer0.path = path0.CGPath;
        
        self.view.layer.addSublayer(layer0);

rect_Image.png

    //public convenience init(ovalInRect rect: CGRect)  根据rect创建一个内切椭圆的path
        let path = UIBezierPath(ovalInRect: CGRectMake(160, 100, 80, 60));
        let layer = CAShapeLayer();
        layer.path = path.CGPath;
        
        self.view.layer.addSublayer(layer);

ovalInRect_Image.png

    //public convenience init(roundedRect rect: CGRect, cornerRadius: CGFloat)  创建一个4个横向纵向圆角一样的矩形
        let path = UIBezierPath(roundedRect: CGRectMake(100, 200, 100, 40), cornerRadius: 10);
        let layer = CAShapeLayer();
        layer.path = path.CGPath;
        
        self.view.layer.addSublayer(layer);

roundedRect_Image.png

    //根据rect、指定任意角、任意size的圆角
    public convenience init(roundedRect rect: CGRect, byRoundingCorners corners: UIRectCorner, cornerRadii: CGSize)      
    //指定圆点、弧度、顺逆时针的圆弧，但是是弧、圆点终点连线成的图形，见下图
    public convenience init(arcCenter center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool) 
    public convenience init(CGPath: CGPath)// 指定path

90度弧

public init()

这个是初始化一个path，我们可以随意操作，就好像我们拿着笔画画一样，这个就好像是拿出笔，现在笔已经准备就绪了，开始画画：
1.需要把笔放到最开始画的起点

public func moveToPoint(point: CGPoint)  //移动画笔的位置

相当于把移动到起始点。
2.画直线

public func addLineToPoint(point: CGPoint) //画直线

从起始点到传入点画直线。
3.画曲线

//双点控制的曲线
public func addCurveToPoint(endPoint: CGPoint, controlPoint1: CGPoint, controlPoint2: CGPoint) 
// 单点控制的曲线
public func addQuadCurveToPoint(endPoint: CGPoint, controlPoint: CGPoint)

控制点与始点、终点的关系

单控制点贝塞尔曲线 双控制点贝塞尔曲线

4.画弧线

public func addArcWithCenter(center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool)

center即圆心位置，radius即半径，startAngle即起始弧度，注意是弧度，不是角度，endAngle结束弧度，clockWise顺时针或逆时针。关于这个弧度的坐标，看下图：

弧度坐标.png

5.结束，会添加一个从终点到起点的直线

public func closePath() 

UIBezierPath的常用方法已经列举完毕，没有坑😄。

二、CAShapeLayer

CAShapeLayer是CALayer的一个子类，比较灵活，有一个CGPath类型的属性path，我们可以通过给这个path赋值，来控制CAShapeLayer的显示规则，还可以使用core animate给它添加动画效果，例如：

        let headPath = UIBezierPath();
        headPath.moveToPoint(CGPointMake(55, 110));
        headPath.addQuadCurveToPoint(CGPointMake(128, 10), controlPoint: CGPointMake(60, 13));
        headPath.addQuadCurveToPoint(CGPointMake(203, 110), controlPoint: CGPointMake(198, 13));
        headPath.addQuadCurveToPoint(CGPointMake(55, 110), controlPoint: CGPointMake(128, 135));
        
        let layer = CAShapeLayer();
        layer.path = headPath.CGPath;

        layer.fillColor = fillColor;
        layer.lineWidth = 1;
        layer.strokeColor = UIColor.blackColor().CGColor;
        let animate = CABasicAnimation(keyPath: "strokeEnd");
        animate.fromValue = NSNumber(float: 0);
        animate.toValue = NSNumber(float: 1);
        animate.duration = self.delayTime;
        animate.removedOnCompletion = false;
        animate.fillMode = kCAFillModeForwards;
            
        layer.addAnimation(animate, forKey: nil);
        self.view.layer.addSublayer(layer);

通过画一个个的曲线、直线，就可以画出最开始的那个企鹅了，文章最后附上demo地址。https://github.com/CaiShengbo/Penguin