本文所有代碼均為swift，但即使你只是一個(gè)OCer，我保證你也不會(huì)看不懂。
HTML5畫圖使用canvas，而在iOS中沒(méi)有canvas，要想畫圖，就必須用到UIBezierPath和CAShapeLayer了，UIBezierPath用來(lái)控制顯示的路徑，CAShapeLayer則用來(lái)表現(xiàn)，兩者結(jié)合，我們幾乎可以為所欲為，先來(lái)看一個(gè)效果圖：

penguin.gif

文章最后附上demo地址

GIF有點(diǎn)掉幀，實(shí)際運(yùn)行效果會(huì)好點(diǎn)。這個(gè)動(dòng)畫看起來(lái)略顯酷炫（??），但其實(shí)用到的東西很簡(jiǎn)單，就是UIBezierpath的簡(jiǎn)單運(yùn)用，我們一步一步來(lái)。

一、UIBezierpath

我們先來(lái)看一下它的初始化方法都有哪些：

    //public convenience init(rect: CGRect)  根據(jù)rect初始化一個(gè)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)  根據(jù)rect創(chuàng)建一個(gè)內(nèi)切橢圓的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)  創(chuàng)建一個(gè)4個(gè)橫向縱向圓角一樣的矩形
        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

    //根據(jù)rect、指定任意角、任意size的圓角
    public convenience init(roundedRect rect: CGRect, byRoundingCorners corners: UIRectCorner, cornerRadii: CGSize)      
    //指定圓點(diǎn)、弧度、順逆時(shí)針的圓弧，但是是弧、圓點(diǎn)終點(diǎn)連線成的圖形，見(jiàn)下圖
    public convenience init(arcCenter center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool) 
    public convenience init(CGPath: CGPath)// 指定path

90度弧

public init()

這個(gè)是初始化一個(gè)path，我們可以隨意操作，就好像我們拿著筆畫畫一樣，這個(gè)就好像是拿出筆，現(xiàn)在筆已經(jīng)準(zhǔn)備就緒了，開(kāi)始畫畫：
1.需要把筆放到最開(kāi)始畫的起點(diǎn)

public func moveToPoint(point: CGPoint)  //移動(dòng)畫筆的位置

相當(dāng)于把移動(dòng)到起始點(diǎn)。
2.畫直線

public func addLineToPoint(point: CGPoint) //畫直線

從起始點(diǎn)到傳入點(diǎn)畫直線。
3.畫曲線

//雙點(diǎn)控制的曲線
public func addCurveToPoint(endPoint: CGPoint, controlPoint1: CGPoint, controlPoint2: CGPoint) 
// 單點(diǎn)控制的曲線
public func addQuadCurveToPoint(endPoint: CGPoint, controlPoint: CGPoint)

控制點(diǎn)與始點(diǎn)、終點(diǎn)的關(guān)系

單控制點(diǎn)貝塞爾曲線

雙控制點(diǎn)貝塞爾曲線

4.畫弧線

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

center即圓心位置，radius即半徑，startAngle即起始弧度，注意是弧度，不是角度，endAngle結(jié)束弧度，clockWise順時(shí)針或逆時(shí)針。關(guān)于這個(gè)弧度的坐標(biāo)，看下圖：

弧度坐標(biāo).png

5.結(jié)束，會(huì)添加一個(gè)從終點(diǎn)到起點(diǎn)的直線

public func closePath() 

UIBezierPath的常用方法已經(jīng)列舉完畢，沒(méi)有坑??。

二、CAShapeLayer

CAShapeLayer是CALayer的一個(gè)子類，比較靈活，有一個(gè)CGPath類型的屬性path，我們可以通過(guò)給這個(gè)path賦值，來(lái)控制CAShapeLayer的顯示規(guī)則，還可以使用core animate給它添加動(dòng)畫效果，例如：

        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);

通過(guò)畫一個(gè)個(gè)的曲線、直線，就可以畫出最開(kāi)始的那個(gè)企鵝了，文章最后附上demo地址。https://github.com/CaiShengbo/Penguin