JavaScript图形实例再谈曲线方程.docx
- 文档编号:7823204
- 上传时间:2023-01-26
- 格式:DOCX
- 页数:18
- 大小:1.11MB
JavaScript图形实例再谈曲线方程.docx
《JavaScript图形实例再谈曲线方程.docx》由会员分享,可在线阅读,更多相关《JavaScript图形实例再谈曲线方程.docx(18页珍藏版)》请在冰豆网上搜索。
JavaScript图形实例再谈曲线方程
JavaScript图形实例:
再谈曲线方程
在“JavaScript图形实例:
曲线方程”一文中,我们给出了15个曲线方程绘制图形的实例。
在本文中,我们继续讨论一下曲线方程。
在本文中,我们讨论的方法时,先给出一个绘制特定图案的曲线方程,然后将方程中的一些取值参数化,然后看看这些参数取不同值时会绘制出怎样的图形,从而通过试探加猜测的方式找出一些绘制精美曲线图案的曲线方程。
1.四叶花瓣线
四叶花瓣线的笛卡尔坐标方程式设定为:
x=r*cos(2θ)*sin(θ)
y=r*sin(2θ)*cos(θ)(0≤θ≤2π)
编写如下的HTML代码。
DOCTYPEhtml>
functiondraw(id)
{
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,300,300);
context.strokeStyle="red";
context.lineWidth=2;
context.save();
context.translate(150,150);
varr=120;
context.beginPath();
for(theta=0;theta<=2*Math.PI;theta+=Math.PI/100)
{
varx=r*Math.cos(2*theta)*Math.sin(theta);
vary=r*Math.cos(2*theta)*Math.cos(theta);
if(theta==0)
context.moveTo(x,y);
else
context.lineTo(x,y);
}
context.stroke();
context.restore();
}