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. Latex 学习

    Latex 学习 @(05.2 Latex)[latex][基础教程] 这篇文章是关于latex基础教程.pdf的一个总结. 基本知识 基础 1. 空格 多个空格会被视为一个空格 单个回车会被视为一个 ...

  2. install MCR in silent mode linux server

    ./install -mode silent -agreeToLicense yes -destinationFolder /home/yanzhh/wq/Programs/MCR export LD ...

  3. Control Flow

    1.重写折半查找,使得在循环内部只执行一次测试 传统的非递归式的折半查找的例子中,while循环语句内部共执行了两次测试,其实只要一次就足够(代价是将更多的测试在循环外执行).重写该函数,使得在循环内 ...

  4. IOS密码加密

    一般使用两种加密技术 1.MD5 2.以前是SHA1加密  现在流行是SHA-2加密

  5. AJAX-----07XMLHttpRequest对象的处理返回的JSON类型数据

    要玩json首先就需要知道一般都数据是怎么处理的: <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. Prism 5 + MEF中的ModuleCatalog.CreateFromXaml问题

    protected override IModuleCatalog CreateModuleCatalog() { return Microsoft.Practices.Prism.Modularit ...

  7. 无法解决 equal to 运算中 "Chinese_PRC_CI_AS" 和 "SQL_Latin1_General_CP1_CI_AS" 之间的排序规则冲突。

    select * from a, b  where a.Code=b.Code collate Chinese_PRC_CI_AS

  8. android抽屉总结

    android抽屉:1.DrawerLayout 在xml文件中要注意写全称:android.support.v4.widget.DrawerLayout <LinearLayout /> ...

  9. android在全屏下第一次触摸屏幕没有触发事件

    A.设置全屏的方法很多就不多说了,常见如下两种(记录用以备忘): 1.在Androidmanifest.xml文件中设定,如: <activity android:name="com. ...

  10. sql索引实例

    1.创建表并插入数据 在Sql Server2008中创建测试数据库Test,接着创建数据库表并插入数据,sql代码如下: USE Test IF EXISTS (SELECT * FROM INFO ...