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. 更多内容请点击
  • 相关阅读:
    c# 集合的交集、并集、差集
    git版本控制
    jquery html动态添加的元素绑定事件详解
    Binding笔记
    动画
    MSSQL 索引
    TCP和UDP的优缺点及区别
    Fetch API 了解 及对比ajax、axois
    提供图片服务网站
    2017 jq 总结
  • 原文地址：https://www.cnblogs.com/j--d/p/js.html
Copyright © 2011-2022 走看看