首页 > 网站 > WEB开发 > 正文

纯JS画点、画线、画圆的方法

2024-04-27 14:11:19
字体：大 中 小
来源：转载
供稿：网友

纯JS画点、画线、画圆的方法

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title><styletype="text/CSS">div{overflow:hidden;}</style><scripttype="text/javascript">/*珠峰培训2011年12月9日课堂示例以下画点，画线，画圆的方法，都不是用HTML5的canvas，而是用的纯js用到了一些数学的三角函数方法以下代码是课堂随机写出，没有做更多优化*/

functionpoint(x,y){//画点varoDiv=document.createElement('div');oDiv.style.position='absolute';oDiv.style.height='2px';oDiv.style.width='2px';oDiv.style.backgroundColor='red';oDiv.style.left=x+'px';oDiv.style.top=y+'px';//document.body.appendChild(oDiv);returnoDiv;//注意：返回的值是一个dom节点，但并未追加到文档中}functiondrawLine(x1,y1,x2,y2){//画一条直线的方法varx=x2-x1;//宽vary=y2-y1;//高varfrag=document.createDocumentFragment();if(Math.abs(y)>Math.abs(x)){//那个边更长，用那边来做画点的依据（就是下面那个循环），如果不这样，if(y>0)//正着画线是这样的

    1. for(vari=0;i<y;i++){
    2. varwidth=x/y*i//x/y是直角两个边长的比，根据这个比例，求出新坐标的位置
    3. {
    4. frag.appendChild(point(width+x1,i+y1));
    5. }
    6. }
    7. if(y<0){//有时候是倒着画线的
    8. for(vari=0;i>y;i--){
    9. varwidth=x/y*i
    10. {
    11. frag.appendChild(point(width+x1,i+y1));
    12. }
    13. }
    14. }
    15. }//endif
    16. else{
    17. if(x>0)//正着画线是这样的
    18. for(vari=0;i<x;i++){
    19. varheight=y/x*i
    20. {
    21. frag.appendChild(point(i+x1,height+y1));
    22. }
    23. }
    24. if(x<0){//有时候是倒着画线的
    25. for(vari=0;i>x;i--){
    26. varheight=y/x*i
    27. {
    28. frag.appendChild(point(i+x1,height+y1));
    29. }
    30. }
    31. }//endif
    32. }
    33. //document.body.appendChild(frag);
    34. document.getElementById('div1').appendChild(frag);
    35. //varoDiv=document.createElement('div')
    36. //oDiv.appendChild(frag);
    37. //document.body.appendChild(oDiv);
    38. }
    39. functiondrawCircle(){//画个圆
    40. varr=200;
    41. varx1=300;
    42. vary1=300;
    43. varfrag=document.createDocumentFragment();
    44. for(vardegree=0;degree<360;degree+=2){
    45. varx2=r*Math.sin(degree*Math.PI/180);
    46. vary2=r*Math.cos(degree*Math.PI/180);
    47. frag.appendChild(point(x1+x2,y1+y2));
    48. }
    49. document.body.appendChild(frag);
    50. }
    51. functiondragCircle(x1,y1,x2,y2){//拖出一个圆来
    52. varr=Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));//求出半径的长直角三角形中斜边的平方=两个直边的平方之和
    53. varfrag=document.createDocumentFragment();
    54. for(vardegree=0;degree<360;degree+=2){//每隔2度画一个点
    55. varx2=r*Math.sin(degree*Math.PI/180);
    56. vary2=r*Math.cos(degree*Math.PI/180);
    57. frag.appendChild(point(x1+x2,y1+y2));
    58. }
    59. document.getElementById('div1').appendChild(frag);
    60. }
    61. window.onload=function(){
    62. drawCircle()
    63. drawLine(500,30,0,30);
    64. drawLine(300,20,300,500);
    65. drawLine(50,20,700,500);
    66. varx1=0;
    67. vary1=0;
    68. //以下是处理拖拽拖拽的时候，出现一条直线和一个圆
    69. //注意：由于这些操作都是由DOM来完成的，所以性能开销比较大，尤其是在IE里，明显的会卡一些。
    70. functiondown(e){
    71. vare=e||window.event;
    72. x1=e.clientX;
    73. y1=e.clientY;
    74. document.onmousemove=move;
    75. document.onmouseup=up;
    76. }
    77. functionmove(e){
    78. document.getElementById('div1').innerHTML='';
    79. vare=e||window.event;
    80. varx2=e.clientX;
    81. vary2=e.clientY;
    82. drawLine(x1,y1,x2,y2);//用这个方法就可以在浏览器上拖出一条直线来
    83. dragCircle(x1,y1,x2,y2);//用这个方法就可以在浏览器上拖出一个圆来
    84. }
    85. functionup(){
    86. document.onmousemove=null;
    87. document.onmouseup=null;
    88. }
    89. document.onmousedown=down;
    90. }
    91. </script>
    92. </head>
    94. <body>
    95. <divid="div1">在浏览器上拖动鼠标试试</div>
    96. </body>
    97. </html>
    98. 更多内容请点击

上一篇：学习OpenSeadragon之四(导航视图)

下一篇：JavaScript--动态加载脚本和样式(23)

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有