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. 让我们的svg起飞，兼容ie9的神器

    <svg xmlns="http://www.w3.org/2000/svg" width="320px" height="200px" ...

  2. 关于SQL Server无法查询中文的问题

    SQL Server 的版本是2016,随便试了一条 带有 where 子句的查询.如下: select * from Roles where RoleName like '%系统%' 呐尼,怎么一条 ...

  3. 反编译ILSpy 无法显式调用运算符或访问器 错误处理方法 转

    反汇编一个dll类库,导出的项目会报出很多bug,其中主要的就是“无法显式调用运算符或访问器”这个错误,看了一下,发现问题是在调用属性的时候,都 变成了方法,例如:pivotPoint.set_X(0 ...

  4. YTU 3025: 创建二叉树

    原文链接:https://www.dreamwings.cn/ytu3025/2628.html 3025: 创建二叉树 时间限制: 1 Sec  内存限制: 128 MB 提交: 3  解决: 3 ...

  5. Js 实现tab切换效果

    今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果 从网上找jquery 已经有了很好看的案例,实现之后我来学习下思路是如何完成的

  6. python之rabbitMQ篇

    一.RabbitMQ安装 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统,它遵循Mozilla Pulic License开源协议. MQ全称为Message Queue,消息队列 ...

  7. easyui datagrid 行右键生成 动态获取（toolbar） 按钮

    var createGridRowContextMenu = function(e, rowIndex, rowData) { e.preventDefault(); var grid = $(thi ...

  8. ggplot2.multiplot：将多个图形使用GGPLOT2在同一页上

    一页多图 介绍 ggplot2.multiplot是一个易于使用的功能,将多个图形在同一页面上使用R统计软件和GGPLOT2绘图方法.这个功能是从easyGgplot2包. 安装并加载easyGgpl ...

  9. DataGridView单元格美化

          #region 重绘Column.Row           int _RowHeadWidth = 41;         ///            /// 重绘Column.Row ...

  10. 。【自学总结 3】------3ds Max 主工具栏

    1.选择并链接:选择对象,使其和其他对象建立父子关系. 2.断开选择链接:撤销链接关系. 3.选择过滤器列表:可以限制要选择的对象的特定类型和组合.例如,我们选择几何体后,其他对象就无法被选择. 4. ...