首页 > 代码库 > 一个奇怪的绘图程序
一个奇怪的绘图程序
专门为了绘制BZOJ 1002的图做的= =
<!DOCTYPE html><html> <head> <title>draw</title> <style> textarea{ font-family:"Consolas"; width:800px; height:400px; } canvas{ border:1px solid #39f; } </style> </head> <body> <canvas id="draw" height="800" width="800"> //nothing here </canvas> <textarea id="ta"> </textarea> <button onclick="console.log(draw(ta.value))">draw</button> <br><textarea id="config">{ "size":300}</textarea> <script> var a=document.getElementById(‘draw‘); var ctx=a.getContext(‘2d‘); var pi=Math.PI; var hpi=pi/2; var x,y,incx,incy,tt; var mid=[400,400]; function hypot(x,y){ return Math.sqrt(x*x+y*y); } function draw_point(p,size,fg,bg,sw){ fg=fg||"#333"; bg=bg||"#ccc"; sw=sw||2; x=p[0]; y=p[1]; ctx.beginPath(); ctx.arc(x,y,size,2*pi,0); ctx.closePath(); ctx.strokeStyle=fg; ctx.lineWidth=sw; ctx.fillStyle=bg; ctx.fill(); ctx.stroke(); } function calc_point(p,size,angle){ angle=hpi-angle; x=p[0]; y=p[1]; incy=Math.sin(angle)*size; incx=Math.cos(angle)*size; return [(x+incx)|0,(y-incy)|0]; } function dist(p1,p2){ return hypot(p1[0]-p2[0],p1[1]-p2[1]); } function draw_mid(){ draw_point(mid,10,"gray","#39f"); } function draw_arc(p1,p2,fg,sw){ fg=fg||"#333"; sw=sw||2; ctx.beginPath(); ctx.arc( mid[0], mid[1], dist( p1, mid ), Math.atan2( p1[0]-mid[0], mid[1]-p1[1] )-hpi, Math.atan2( p2[0]-mid[0], mid[1]-p2[1] )-hpi, false ); ctx.strokeStyle=fg; ctx.lineWidth=sw; ctx.stroke(); } function draw_line(p1,p2,fg,sw){ fg=fg||"#333"; sw=sw||2; ctx.beginPath(); ctx.moveTo(p1[0],p1[1]); ctx.lineTo(p2[0],p2[1]); ctx.strokeStyle=fg; ctx.lineWidth=sw; ctx.stroke(); } function draw(str){ ctx.lineCap="butt"; var cfg=JSON.parse(config.value); ctx.fillStyle="white"; ctx.fillRect(0,0,800,800); var ps=str.split(‘\n‘).map(function(a){ tt=a.split(";"); tt[0]=(tt[0]==‘l‘?1:(tt[0]==‘lr‘?3:(tt[0]==‘n‘?0:2))); tt[1]=JSON.parse(tt[1]); return tt; }); var n=ps.length,k=ps; var zz=2*pi/n,zb=0; cfg.size=cfg.size||300; cfg.radius=cfg.radius||20; for(var i=0;i<n;++i){ k[i][1].size=k[i][1].size||15; k[i].push( calc_point( mid, cfg.size, zb ) ); k[i].push(zb); zb+=zz; } k.push(k[0]); draw_point(mid,cfg.radius,cfg.fg,cfg.bg,cfg.sw); for(var i=0;i<n;++i){ draw_point( k[i][2], k[i][1].size, k[i][1].fg, k[i][1].bg, k[i][1].sw ); if(k[i][0]&1){ draw_line( calc_point( mid, cfg.radius, k[i][3] ), calc_point( k[i][2], k[i][1].size, pi+k[i][3] ), k[i][1].lfg, k[i][1].lw ); } if(k[i][0]&2){ draw_arc( calc_point( k[i][2], k[i][1].size, k[i][3]+hpi ), calc_point( k[i+1][2], k[i+1][1].size, k[i+1][3]-hpi ), k[i][1].lfg, k[i][1].lw ); } } return k; } </script> </body></html>不过不是傻瓜式的呢= =
要用还是要花费些时间研究的,效果绝对赞啦~~比PowerPoint画出来的好多啦>_<
坐标系转换坑死爹啊= . =
界面有些丑陋啊XD
有bug comment我哈0.0
一个奇怪的绘图程序
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。