绘制数学形状 [英] Drawing math shape
问题描述
大家好，
我一直在看这个网站上的javascript图画：
http://www.cwdjr.net/geometricDraw/pentagon_draw .html"
我想知道为什么作者把它变成了两个图像的
：上半部分然后是下半部分？是否有规则
说
你不能在一组计算值中为所有点做这些点
积分
放在document.write（）中？
javascript放在下面供参考：
.... .start的复制？
< script type =" text / javascript">
document.bgColor =" 000000" ;
var py1 = 150 // y五角大楼中心位置;
var px = 272 // x五角大楼中心位置;
var r1 = 150 //只是持有五角大楼的半径
var ctr = 0; //分区计数器;
anga =（2 * Math.PI）/ 5;
sl = r1 * Math.sin（（2 * Math。 PI）/ 5）;
d = r1 * Math.cos（（Math.PI）/ 5）;
e = r1 * Math.cos（（2 * Math。 PI）/ 5）;
h1 = d + e;
f = e * Math.tan（anga）;
px1 = px- F ; px2 = px + f;
h2 = r1-e;
sbeta = e / r1;
gamma =（Math.PI - anga ）/ 2;
phi = gamma + Math.asin（sbeta）;
tphi = Math.tan（phi）;
line = px2-px1;
for（r = 0; r< h2; r = r + 1）{
z = Math.round（（r * line） ）/（2 * h2））;
x = px1 + z;
y = py1-r;
wd = line-2 * z ;
rd = 255; gn = 0; bl = 0;
document.write（''< div id = \" a''+ ctr +''\" style = \" position：absolute;
左：''+ x +''px; top：''+ y +''px; height：1px; width：''+ wd +''px;
background-color：rgb（''+ rd +''，''+ gn +''，''+ bl +''）; z-index：1;
visibility：visible \" ;>< \ / div>''）;
ctr = ctr + 1;
window.status =" DIVISIONS
WRITTEN =" + ctr;
for（r = 0; r< h1; r = r + 1）{
z = Math.round（r / tphi） ;
x = px1 + z;
y = py1 + r;
wd = line-2 * z;
rd = 255; gn = 0; bl = 0;
document.write（''< div id = \" a''+ ctr +''\" style = \" position：absolute;
左：''+ x +''px; top：''+ y +''px; height：1px; width：''+ wd +''px;
background-color：rgb（''+ rd +''，''+ gn +''，''+ bl +''）; z-index：1;
visibility：visible \" ;>< \ / div>''）;
ctr = ctr + 1;
window.status =" DIVISIONS WRITTEN =" + ctr;
}
< / script>
< / head>
< body>
< script type =" text / javascript">
if（px1< 0 || px1> 544 || px2< = px1 || px2> 544）{
window.status ="输入值太极端。 };
< / script>
.....复制结束
TIA
bH
Hi All,
I have been looking at javascript drawing from this website :
http://www.cwdjr.net/geometricDraw/pentagon_draw.html"
and I am wondering why the author made it
into two images : upper half then lower half?. Is there a rule that
says
you can''t do it in one set of calculated values for all the points as
the points
are placed in the document.write( )?
The javascript is placed below for reference:
.....start of copied?
<script type="text/javascript">
document.bgColor="000000";
var py1=150 // y position of center of pentagon ;
var px=272 // x psition of center of pentagon ;
var r1=150 // radius that just holds pentagon
var ctr=0 ; // division counter ;
anga=(2*Math.PI)/5 ;
sl=r1*Math.sin((2*Math.PI)/5) ;
d=r1*Math.cos((Math.PI)/5) ;
e=r1*Math.cos((2*Math.PI)/5) ;
h1=d+e ;
f=e*Math.tan(anga) ;
px1=px-f ; px2=px+f ;
h2=r1-e ;
sbeta=e/r1 ;
gamma=(Math.PI - anga)/2 ;
phi=gamma+Math.asin(sbeta) ;
tphi=Math.tan(phi) ;
line=px2-px1 ;
for (r=0;r<h2;r=r+1) {
z=Math.round((r*line)/(2*h2)) ;
x=px1+z ;
y=py1-r ;
wd=line-2*z ;
rd=255 ; gn=0 ; bl=0 ;
document.write(''<div id=\"a''+ctr+''\" style=\"position:absolute;
left:''+x+''px; top:''+y+''px; height: 1px; width:''+wd+''px;
background-color: rgb(''+rd+'',''+gn+'',''+bl+''); z-index:1;
visibility:visible\"><\/div>'') ;
ctr=ctr+1 ;
window.status="DIVISIONS
WRITTEN="+ctr ;
for (r=0;r<h1;r=r+1) {
z=Math.round(r/tphi) ;
x=px1+z ;
y=py1+r ;
wd=line-2*z ;
rd=255 ; gn=0 ; bl=0 ;
document.write(''<div id=\"a''+ctr+''\" style=\"position:absolute;
left:''+x+''px; top:''+y+''px; height: 1px; width:''+wd+''px;
background-color: rgb(''+rd+'',''+gn+'',''+bl+''); z-index:1;
visibility:visible\"><\/div>'') ;
ctr=ctr+1 ;
window.status="DIVISIONS WRITTEN="+ctr ;
}
</script>
</head>
<body>
<script type="text/javascript">
if (px1<0 || px1>544 || px2<=px1 || px2>544) {
window.status="Input values too extreme." } ;
</script>
.....end of copied
TIA
bH
推荐答案
bH写道：
bH wrote:
我一直在看javascript绘图来自这个网站：
http://www.cwdjr.net/geometricDraw/pentagon_draw.html"
我想知道为什么作者把它变成了两个图像：上半部分
然后下半部分？
I have been looking at javascript drawing from this website :
http://www.cwdjr.net/geometricDraw/pentagon_draw.html"
and I am wondering why the author made it into two images : upper half
then lower half?.
没有图片。 Firebug显示有一些生成的1px
高HTMLdiv元素，一个相当愚蠢的设计。
There are no images. Firebug shows there are but a number of generated 1px
high HTML `div'' elements, a rather stupid design.
有没有规则说你不能在一组计算值中做到这一点
所有点的
因为这些点放在document.write（）中？
Is there a rule that says you can''t do it in one set of calculated values
for all the points as the points are placed in the document.write( )?
有一条规则说：正确用途的正确工具。这里正确的
工具是（符合标准的）SVG（支持很好地支持
在维基百科中用于各种可扩展图形）或者可能
（专有）画布;当然不是简单的HTML。整个事情都有一个很好的低效初学者练习，仅此而已。
PointedEars
-
任何拍下这个页面的人最好用浏览器X查看标签
a网页似乎渴望过去的糟糕时光，在网络之前，
当你几乎没有机会阅读另一台计算机，另一个文字处理器或其他网络上的文件时。 - Tim Berners-Lee
There is a rule that says: the right tool for the right purpose. The right
tool here is (standards-compliant) SVG (which is supported well enought to
be used in Wikipedia for all kinds of scalable graphics) or maybe
(proprietary) Canvas; certainly not plain HTML. The whole thing there is a
nice inefficient beginner''s exercise, nothing more.
PointedEars
--
Anyone who slaps a ''this page is best viewed with Browser X'' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
bHaécrit：
bH a écrit :
大家好，
我一直在看这个网站上的javascript图：
http://www.cwdjr.net/geometricDraw/pentagon_draw.html"
Hi All,
I have been looking at javascript drawing from this website :
http://www.cwdjr.net/geometricDraw/pentagon_draw.html"
同样的想法：
< http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm>
In same idea :
<http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm>
我想知道为什么作者把它变成了两个图像的上半部分：上半部分然后是下半部分？
and I am wondering why the author made it
into two images : upper half then lower half?.
也许是因为他无法解决五角形的绘制问题？
并且更喜欢绘制三角形然后是空中飞人？
如何找到五角形的5个点的位置
（相对于x和y轴）
同样的问题使用帆布或svg ......？ ！
-
sm
perhaps because he could not resolve the drawing of a pentagone ?
and preferred to draw a triangle then a trapeze ?
How do you do to find the position of the 5 points of a pentagone
(relatively to x and y axes)
Same question using canvas or svg ... ? !
--
sm
托马斯''PointedEars''Lahn写道：
Thomas ''PointedEars'' Lahn wrote:
bH写道：
bH wrote:
>我一直在看这个网站上的javascript图：
>I have been looking at javascript drawing from this website :
> http：//www.cwdjr.net/geometricDraw/pentagon_draw.html"
我想知道为什么作者把它变成了两张图片：上半部分然后下半部分？
>http://www.cwdjr.net/geometricDraw/pentagon_draw.html"
and I am wondering why the author made it into two images : upper half
then lower half?.
没有图片。 * Firebug显示有一些生成的1px
高HTML`div''元素，一个相当愚蠢的设计。
There are no images. *Firebug shows there are but a number of generated1px
high HTML `div'' elements, a rather stupid design.
> Is有一条规则说你不能在一组计算值中为所有点做这些点，因为这些点放在document.write（*）中？
>Is there a rule that says you can''t do it in one set of calculated values
for all the points as the points are placed in the document.write( *)?
有一条规则说：正确用途的正确工具。 *这里正确的
工具是（符合标准的）SVG（在维基百科中用于各种可扩展图形的支持很好）或者可能
（专有）画布;当然不是简单的HTML。
There is a rule that says: the right tool for the right purpose. *The right
tool here is (standards-compliant) SVG (which is supported well enought to
be used in Wikipedia for all kinds of scalable graphics) or maybe
(proprietary) Canvas; certainly not plain HTML.
我可能更喜欢将PNG输出到< img
srccall的Google Chart。例如，原始海报的要求：
http：//chart.apis。 google.com/chart?c...chf=c,s,000000
手册：
http://code.google.com/apis/chart/
-
巴特
I would probably prefer a Google Chart that outputs PNG to an <img
srccall. For example, the requirement of the original poster:
http://chart.apis.google.com/chart?c...chf=c,s,000000
Manual:
http://code.google.com/apis/chart/
--
Bart
这篇关于绘制数学形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
