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
}
}
效果如下: