1. <!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)//正着画线是这样的
    for(var i=0;i<y;i++){
    var width=x/y*i //x/y是直角两个边长的比，根据这个比例，求出新坐标的位置
    {
    frag.appendChild(point(width+x1,i+y1));
    }
    }
    if(y<0){//有时候是倒着画线的
    for(var i=0;i>y;i--){
    var width=x/y*i
    {
    frag.appendChild( point(width+x1,i+y1));
    }
    }
    }
    }//end if
    else {
    if(x>0)//正着画线是这样的
    for(var i=0;i<x;i++){
    var height=y/x*i
    {
    frag.appendChild(point(i+x1,height+y1));
    }
    }
    if(x<0){//有时候是倒着画线的
    for(var i=0;i>x;i--){
    var height=y/x*i
    {
    frag.appendChild( point(i+x1,height+y1));
    }
    }
    }//end if
    }
    //document.body.appendChild(frag);
    document.getElementById('div1').appendChild(frag);
    //var oDiv=document.createElement('div')
    //oDiv.appendChild(frag);
    //document.body.appendChild(oDiv);
    }
    function drawCircle(){//画个圆
    var r=200;
    var x1=300;
    var y1=300;
    var frag=document.createDocumentFragment();
    for(var degree=0;degree<360;degree+=2){
    var x2=r*Math.sin(degree*Math.PI/180);
    var y2=r*Math.cos(degree*Math.PI/180);
    frag.appendChild(point(x1+x2,y1+y2));
    }
    document.body.appendChild(frag);
    }
    function dragCircle(x1,y1,x2,y2){//拖出一个圆来
    var r=Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));//求出半径的长 直角三角形中 斜边的平方=两个直边的平方之和
    var frag=document.createDocumentFragment();
    for(var degree=0;degree<360;degree+=2){//每隔2度画一个点
    var x2=r*Math.sin(degree*Math.PI/180);
    var y2=r*Math.cos(degree*Math.PI/180);
    frag.appendChild(point(x1+x2,y1+y2));
    }
    document.getElementById('div1').appendChild(frag);
    }
    window.onload=function(){
    drawCircle()
    drawLine(500,30,0,30);
    drawLine(300,20,300,500);
    drawLine(50,20,700,500);
    var x1=0;
    var y1=0;
    //以下是处理拖拽 拖拽的时候，出现一条直线和一个圆
    //注意：由于这些操作都是由DOM来完成的，所以性能开销比较大，尤其是在IE里，明显的会卡一些。
    function down(e){
    var e=e||window.event;
    x1=e.clientX;
    y1=e.clientY;
    document.onmousemove=move;
    document.onmouseup=up;
    }
    function move(e){
    document.getElementById('div1').innerHTML='';
    var e=e||window.event;
    var x2=e.clientX;
    var y2=e.clientY;
    drawLine(x1,y1,x2,y2);//用这个方法就可以在浏览器上拖出一条直线来
    dragCircle(x1,y1,x2,y2);//用这个方法就可以在浏览器上拖出一个圆来
    }
    function up(){
    document.onmousemove=null;
    document.onmouseup=null;
    }
    document.onmousedown=down;
    }
    </script>
    </head>

    <body>
    <div id="div1">在浏览器上拖动鼠标试试</div>
    </body>
    </html>

javascript画直线和画圆的方法（非HTML5的方法）的更多相关文章

  1. 跨域访问的解决方案（非HTML5的方法：JSONP)

    http://supercharles888.blog.51cto.com/609344/856886 跨域访问一直是困扰很多开发者的问题之一.因为涉及到安全性问题,所以跨域访问默认是不可以进行的,否 ...

  2. 《图形学》实验四：中点Bresenham算法画直线

    开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画直线. 实验结果: 代码: //中点Bresenham算法生成直线 #include <gl/glut.h& ...

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 1.1.2-学习Opencv与MFC混合编程之---画图工具 画直线 画圆 画矩形

    源代码地址:http://download.csdn.net/detail/nuptboyzhb/3961685 画图工具 1.     画直线 Ø  增加‘直线’菜单项,建立类向导: Ø  对CXX ...

  5. SDL系列之 - 用画直线的方法来画正弦曲线

    线段长度无限短后就成为点,所以,现在让我们用画直线的方法来画正弦曲线吧 #include <SDL.h> #include <stdlib.h> #include <st ...

  6. 几种画直线的方法-孙鑫C++笔记

    // HDC画直线 CPoint m_ptOrigin ; void CDrawView::OnLButtonDown(UINT nFlags, CPoint point) { m_ptOrigin ...

  7. Path画直线与弧线

    代码地址如下:http://www.demodashi.com/demo/14754.html 前言 之前讲过Paint和Canvas的基本使用,今天来介绍下Path的使用 涉及内容有: Path画直 ...

  8. IOS 绘制基本图形（ 画圆、画线、画圆弧、绘制三角形、绘制四边形）

    // 当自定义view第一次显示出来的时候就会调用drawRect方法- (void)drawRect:(CGRect)rect { // 1.获取上下文 CGContextRef ctx = UIG ...

  9. Bresenham’s algorithm( 布兰森汉姆算法)画直线

    Bresenham直线算法是用来描绘由两点所决定的直线的算法,它会算出一条线段在 n 维光栅上最接近的点.这个算法只会用到较为快速的整数加法.减法和位元移位,常用于绘制电脑画面中的直线.是计算机图形学 ...

随机推荐

  1. delphi的webBrowser操作HTML研究

    测试例子: 外网电脑D:\TEST\delphiTest\webbrowsetest 参考文档: delphi 操作WebBrowser 元素值 http://hi.baidu.com/kinglik ...

  2. 微信、qq信息汇总、回复（一）

    想法:        有的人喜欢用qq,有的人喜欢用微信,总而言之,是一个通信工具.        qq上有很多群,微信上有很多群,每个群挨个浏览一遍.回复,还容易回复错误,前言不接后语.       ...

  3. tomcat普通用户运行

    网站绑定域名后直接通过域名访问使用的是80端口,因此tomcat须监听80端口,而为了安全起见tomcat一般不用root身份运行,综上,需要以普通用户来运行监听80端口的tomcat.此时就会启动失 ...

  4. Dynamics AX 2012 R2 配置报表服务器

    今天Reinhard在使用报表的过程中,发现以下错误: The default Report Server Configuration ID could not be found in the SRS ...

  5. Python之控制台输入密码的方法

    一.raw_input()或input(): for python 2.x [root@master test]# /usr/local/python2.7/bin/python test.py Pl ...

  6. JavaScript DOM 编程艺术（第2版）读书笔记 (9)

    三位一体的网页 结构层:由HTML或XHTML之类的标记语言负责创建: 表示层:由CSS负责完成: 行为层:负责内容应该如何响应事件这一问题.这是由JavaScript语言和DOM主宰的领域. 分离 ...

  7. mysql删除带有NULL的行

    假如表A有一列,名字为“Age”,有些行对应的Age为NULL,如果要删除这些行,使用一下语句: delete from A where Age is null;

  8. python学习笔记六 面向对象相关下(基础篇)

    面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以将多函数中公用的变量封装到对象中) 对象,根据模板创建的 ...

  9. wifipineapple使用教程

    1.把开关拨到右边 如果有灯亮说明有电 4个灯全亮说明电量是满的 以此类推 如果一个也不亮说明没电了需要用充电器充电 2.把开关拨到左边打开wifi的开关  会开启一个wifi大概一分钟左右会有wif ...

  10. NSTimer(定时器)

    [_timer fire]; fire并不是启动一个定时器,只是执行一次定时器事件(触发一次定时器事件)而已; 注意:不影响定时器设置的时间,即,不影响之前设定的使用,定时器该怎么跑就怎么跑,fire ...