HTML5使用Canvas动态绘制心型线和玫瑰线的教程

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并没有被改变，他使我的绘制的图形发生了缩放。

接着我们通过id选取该canvas元素，在绘图之前需要使用getcontext（）方法取得绘图上下文。接着就根据参数方程开始绘制路径了，主要使用lineto（）方法绘制。代码如下：

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
    }
}

效果如下：