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. 闭包（closure）

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于Javascript初学者应该是很有用的. 一.变量的作用域 要理解 ...

  2. 使用Redux管理你的React应用

    因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https://github.com/matthew ...

  3. Java集合---ArrayList的实现原理

    目录: 一. ArrayList概述 二. ArrayList的实现 1) 私有属性 2) 构造方法 3) 元素存储 4) 元素读取 5) 元素删除                 6) 调整数组容量 ...

  4. ruby注意点

    1.强类型,即不会自动进行类型转换,而C/C++为弱类型. # Ruby i = 1 puts "Value is " + i # TypeError: can't convert ...

  5. [attribute^=value] 匹配给定的属性是以某些值开始的元素

    描述: 查找所有 name 以 'news' 开始的 input 元素 HTML 代码: <input name="newsletter" /> <input n ...

  6. (原创) cocos2dx使用Curl连接网络(客户端)

    0. 环境: winxpsp3, vs2010, cocos2dx@2.1.4 1. 新建一个Helloworld工程 2. HelloworldScene.h里面重写virtual bool ccT ...

  7. SQL Server 2008教程和Microsoft® SQL Server® 2008 R2 SP2 - Express Edition下载

    教程 SQL Server 2008 Tutorialhttp://www.quackit.com/sql_server/sql_server_2008/tutorial/ 数据库下载 Microso ...

  8. Python3基础 把一个列表中内容给另外一个列表，形成两个独立的列表

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  9. 【leetcode❤python】 203. Remove Linked List Elements

    #-*- coding: UTF-8 -*- # Definition for singly-linked list.# class ListNode(object):#     def __init ...

  10. web.xml配置详情 - 简要介绍

    <!--web.xml 元素简介--> <?xml version="1.0" encoding="UTF-8"?><web-ap ...