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. cocos2d-x使用AssetsManager类实现资源的在线更新

    从2.1.2版本开始,2dx在libExtensions下添加了一个AssetsManager类用于资源的在线更新和简单的版本管理,同时添加了AssetsManagerTest项目示范了AssetsM ...

  2. jQuery选择器和事件

    选择器 常用事件 绑定与解除绑定 事件目标与冒泡 自定义事件

  3. WPF关于Generic.xaml

    如果需要用到Themes/Generic.xaml作为默认风格资源文件,不要忘了该项目的AssemblyInfo.cs中必须要有以下这段: [assembly: ThemeInfo( Resource ...

  4. jquery easyui DataGrid 数据表格 属性

    用法 1.  <table id="tt"></table> 1.  $('#tt').datagrid({ 2.      url:'datagrid_d ...

  5. oracle表的操作简述

    单表的操作!(代码完全可以用手工代替,写下来为了记忆)1.建立表create table HKB_TABLE_MODIFY(  NAME VARCHAR2(6),  AGE  VARCHAR2(3), ...

  6. Session与cookie的区别？

    1.cookie 是一种发送到客户浏览器的文本串句柄,并保存在客户机硬盘上,可以用来在某个WEB站点会话间持久的保持数据. 2.session其实指的就是访问者从到达某个特定主页到离开为止的那段时间. ...

  7. JavaScript encodeURI(), decodeURI(), encodeURIComponent(), decodeURIComponent()

    URI:  Uniform Resource Identifier encodeURI() And decodeURI() The encodeURI() function is used to en ...

  8. [转] C语言常见笔试题大全1

    点击阅读原文 1. 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SECONDS_PER_YEAR (60 * 60 * 24 * 365UL) [ ...

  9. jQuery 简单过滤选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...

  10. Bash基本语法

         Bash语法非常的简单,Bash是一个命令解释程序,单使用Bash做不了什么,但是Bash结合Linux命令就很强大了,几乎可以完成Linux所有的事情,早年第一个接触Bash的时候,可以追 ...