zoukankan      html  css  js  c++  java

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

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

    function point(x,y){//画点
    var oDiv=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);
    return oDiv;//注意：返回的值是一个dom节点，但并未追加到文档中
    }
    function drawLine(x1,y1,x2,y2){//画一条直线的方法
    var x=x2-x1;//宽
    var y=y2-y1;//高
    var frag=document.createDocumentFragment();
    if(Math.abs(y)>Math.abs(x)){//那个边更长，用那边来做画点的依据（就是下面那个循环），如果不这样，
    if(y>0)//正着画线是这样的

      1. for(var i=0;i<y;i++){
      2. var width=x/y*i  //x/y是直角两个边长的比，根据这个比例，求出新坐标的位置
      3. {
      4. frag.appendChild(point(width+x1,i+y1));
      5. }
      6. }
      7. if(y<0){//有时候是倒着画线的
      8. for(var i=0;i>y;i--){
      9. var width=x/y*i
      10. {
      11. frag.appendChild(   point(width+x1,i+y1));
      12. }
      13. }
      14. }
      15. }//end if
      16. else {
      17. if(x>0)//正着画线是这样的
      18. for(var i=0;i<x;i++){
      19. var height=y/x*i
      20. {
      21. frag.appendChild(point(i+x1,height+y1));
      22. }
      23. }
      24. if(x<0){//有时候是倒着画线的
      25. for(var i=0;i>x;i--){
      26. var height=y/x*i
      27. {
      28. frag.appendChild(   point(i+x1,height+y1));
      29. }
      30. }
      31. }//end if
      32. }
      33. //document.body.appendChild(frag);
      34. document.getElementById('div1').appendChild(frag);
      35. //var oDiv=document.createElement('div')
      36. //oDiv.appendChild(frag);
      37. //document.body.appendChild(oDiv);
      38. }
      39. function drawCircle(){//画个圆
      40. var r=200;
      41. var x1=300;
      42. var y1=300;
      43. var frag=document.createDocumentFragment();
      44. for(var degree=0;degree<360;degree+=2){
      45. var x2=r*Math.sin(degree*Math.PI/180);
      46. var y2=r*Math.cos(degree*Math.PI/180);
      47. frag.appendChild(point(x1+x2,y1+y2));
      48. }
      49. document.body.appendChild(frag);
      50. }
      51. function dragCircle(x1,y1,x2,y2){//拖出一个圆来
      52. var r=Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));//求出半径的长 直角三角形中 斜边的平方=两个直边的平方之和
      53. var frag=document.createDocumentFragment();
      54. for(var degree=0;degree<360;degree+=2){//每隔2度画一个点
      55. var x2=r*Math.sin(degree*Math.PI/180);
      56. var y2=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. var x1=0;
      67. var y1=0;
      68. //以下是处理拖拽 拖拽的时候，出现一条直线和一个圆
      69. //注意：由于这些操作都是由DOM来完成的，所以性能开销比较大，尤其是在IE里，明显的会卡一些。
      70. function down(e){
      71. var e=e||window.event;
      72. x1=e.clientX;
      73. y1=e.clientY;
      74. document.onmousemove=move;
      75. document.onmouseup=up;
      76. }
      77. function move(e){
      78. document.getElementById('div1').innerHTML='';
      79. var e=e||window.event;
      80. var x2=e.clientX;
      81. var y2=e.clientY;
      82. drawLine(x1,y1,x2,y2);//用这个方法就可以在浏览器上拖出一条直线来
      83. dragCircle(x1,y1,x2,y2);//用这个方法就可以在浏览器上拖出一个圆来
      84. }
      85. function up(){
      86. document.onmousemove=null;
      87. document.onmouseup=null;
      88. }
      89. document.onmousedown=down;
      90. }
      91. </script>
      92. </head>
      94. <body>
      95. <div id="div1">在浏览器上拖动鼠标试试</div>
      96. </body>
      97. </html>
      98. 更多内容请点击
  • 相关阅读:
    LeetCode 842. Split Array into Fibonacci Sequence
    LeetCode 1087. Brace Expansion
    LeetCode 1219. Path with Maximum Gold
    LeetCode 1079. Letter Tile Possibilities
    LeetCode 1049. Last Stone Weight II
    LeetCode 1046. Last Stone Weight
    LeetCode 1139. Largest 1-Bordered Square
    LeetCode 764. Largest Plus Sign
    LeetCode 1105. Filling Bookcase Shelves
    LeetCode 1027. Longest Arithmetic Sequence
  • 原文地址：https://www.cnblogs.com/j--d/p/js.html
Copyright © 2011-2022 走看看