1HTML5的Canvas元素提供了豐富的繪圖功能，能夠使我們製作出許多精美的動畫。本次將運用canvas繪製心型線和玫瑰線。

1.心型線和玫瑰線

繪製這兩種曲線，首先我們分別選用兩個引數方程（心型線和玫瑰線的引數方程不同，其形態特徵也不一樣，你可以根據你的需要選擇合適的引數方程）
桃心型線的引數方程：
x = 16 （sinθ）^3
y = 13 cosθ- 5 cos 2θ - 2 cos 3θ - cos 4θ
玫瑰線的引數方程：
x=sin4θ×cosθ
y=sin4θ×sinθ

2.繪製

假設我們在html頁面中有一個Canvas元素，其Id為drawing。（注意利用CSS樣式設定的Canvas的高度和寬度只是元素顯示的高度和寬度，並不是畫布的高度和寬度，後者是不帶單位的，這點尤為重要。初次使用時，我用Css設定了寬度為300px，高度為300px的canvas元素，想畫一個正方形，最終顯示結果卻是一個矩形，原來畫布預設大小為300×150並沒有被改變，他使我的繪製的圖形發生了縮放。關於畫布大小的設定可以參考這篇部落格：

function draw(){
    var drawing = document.getElementById("drawing"); //獲取canvas元素
    drawing.width = '500'; //設定畫布大小
    drawing.height = '500';
    if (drawing.getContext){  //獲取繪圖上下文
 

        var content = drawing.getContext("2d"),
            radian = 0,   //設定初始弧度
            radian_add = Math.PI/180;  //設定弧度增量
        content.beginPath();  //開始繪圖
        content.translate(250,250);  //設定繪圖原點
        content.moveTo(getX(radian),getY(radian)); //移動繪圖遊標至原點
        while(radian <= (Math.PI*2
 
)){  //每增加一次弧度，繪製一條線
            radian += radian_add;
            X = getX(radian);
            Y = getY(radian);
            content.lineTo(X,Y);
        }
        content.strokeStyle = "red";  //設定描邊樣式
        content.stroke();  //對路徑描邊
    }
}

function getX(t){   //獲取玫瑰線的X座標
    return 100 * Math.sin(4*t)*Math.cos(t);
}

function getY(t){  //獲取玫瑰線的Y座標
    return 100 * Math.sin(4*t)*Math.sin(t);
}

function getX1(t){  //獲取心型線的X座標
    return 15*(16*Math.pow(Math.sin(t),3))
}

function getY1(t){  //獲取心型線的Y座標
    return -15*(13*Math.cos(t)-5*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(4*t))
}

效果如下：

3.動態繪製線條以及用圖片描邊

我們可以結合drawImage()和setInterval（）方法，用圖片（例如一朵小花）來動態繪製曲線，只需修改部分程式碼，以心型線舉例：
修改的draw（）程式碼如下：

function draw(){
    var drawing = document.getElementById("drawing"),
        pic = document.getElementById('flower'); //獲取描邊圖片
    drawing.width = '500';
    drawing.height = '500';
    if (drawing.getContext){
        var content = drawing.getContext("2d"),
            radian = 0,
            radian_add = Math.PI/40;
        content.translate(250,250);
        function heart(){
            X = getX1(radian);
            Y = getY1(radian);
            content.drawImage(pic,X,Y,25,25);   //在給定座標繪製給定大小的圖片
            radian+=radian_add;
            if (radian > (2*Math.PI)){ //繪製完整的心型線後取消間歇呼叫 
                clearInterval(intervalId);
            }
        }
        intervalId = setInterval(heart,100);  //設定間歇呼叫，間隔為100ms
    }
}

效果如下：