<!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)//正着画线是这样的

    1. for(var i=0;i<y;i++){
    2. var width=x/y*i  //x/y是直角两个边长的比，根据这个比例，求出新坐标的位置
    3. {
    4. frag.appendChild(point(width+x1,i+y1));
    5. }
    6. }
    7. if(y<0){//有时候是倒着画线的
    8. for(var i=0;i>y;i--){
    9. var width=x/y*i
    10. {
    11. frag.appendChild(   point(width+x1,i+y1));
    12. }
    13. }
    14. }
    15. }//end if
    16. else {
    17. if(x>0)//正着画线是这样的
    18. for(var i=0;i<x;i++){
    19. var height=y/x*i
    20. {
    21. frag.appendChild(point(i+x1,height+y1));
    22. }
    23. }
    24. if(x<0){//有时候是倒着画线的
    25. for(var i=0;i>x;i--){
    26. var height=y/x*i
    27. {
    28. frag.appendChild(   point(i+x1,height+y1));
    29. }
    30. }
    31. }//end if
    32. }
    33. //document.body.appendChild(frag);
    34. document.getElementById('div1').appendChild(frag);
    35. //var oDiv=document.createElement('div')
    36. //oDiv.appendChild(frag);
    37. //document.body.appendChild(oDiv);
    38. }
    39. function drawCircle(){//画个圆
    40. var r=200;
    41. var x1=300;
    42. var y1=300;
    43. var frag=document.createDocumentFragment();
    44. for(var degree=0;degree<360;degree+=2){
    45. var x2=r*Math.sin(degree*Math.PI/180);
    46. var y2=r*Math.cos(degree*Math.PI/180);
    47. frag.appendChild(point(x1+x2,y1+y2));
    48. }
    49. document.body.appendChild(frag);
    50. }
    51. function dragCircle(x1,y1,x2,y2){//拖出一个圆来
    52. var r=Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));//求出半径的长 直角三角形中 斜边的平方=两个直边的平方之和
    53. var frag=document.createDocumentFragment();
    54. for(var degree=0;degree<360;degree+=2){//每隔2度画一个点
    55. var x2=r*Math.sin(degree*Math.PI/180);
    56. var y2=r*Math.cos(degree*Math.PI/180);
    57. frag.appendChild(point(x1+x2,y1+y2));
    58. }
    59. document.getElementById('div1').appendChild(frag);
    60. }
    61. window.onload=function(){
    62. drawCircle()
    63. drawLine(500,30,0,30);
    64. drawLine(300,20,300,500);
    65. drawLine(50,20,700,500);
    66. var x1=0;
    67. var y1=0;
    68. //以下是处理拖拽 拖拽的时候，出现一条直线和一个圆
    69. //注意：由于这些操作都是由DOM来完成的，所以性能开销比较大，尤其是在IE里，明显的会卡一些。
    70. function down(e){
    71. var e=e||window.event;
    72. x1=e.clientX;
    73. y1=e.clientY;
    74. document.onmousemove=move;
    75. document.onmouseup=up;
    76. }
    77. function move(e){
    78. document.getElementById('div1').innerHTML='';
    79. var e=e||window.event;
    80. var x2=e.clientX;
    81. var y2=e.clientY;
    82. drawLine(x1,y1,x2,y2);//用这个方法就可以在浏览器上拖出一条直线来
    83. dragCircle(x1,y1,x2,y2);//用这个方法就可以在浏览器上拖出一个圆来
    84. }
    85. function up(){
    86. document.onmousemove=null;
    87. document.onmouseup=null;
    88. }
    89. document.onmousedown=down;
    90. }
    91. </script>
    92. </head>
    93. <body>
    94. <div id="div1">在浏览器上拖动鼠标试试</div>
    95. </body>
    96. </html>

    97. 更多内容请点击

纯JS画点、画线、画圆的方法的更多相关文章

  1. javascript画直线和画圆的方法（非HTML5的方法）

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

  2. HTML5画：线、圆、矩形、渐变

    示例一:矩形 <!DOCTYPE html><head> <meta charset=utf-8> <title>HTML5画线.圆.矩形</ti ...

  3. 【液晶模块系列基础视频】4.1.X-GUI图形界面库-画线画圆等函数简介

    [液晶模块系列基础视频]4.1.X-GUI图形界面库-画线画圆等函数简介 ============================== 技术论坛:http://www.eeschool.org 博客地 ...

  4. WPF在圆上画出刻度线

    思路 我们可以使用Ellipse先画出一个圆当背景,然后用Canvas再叠加画上刻度线,就能得到如下的效果 我们先用Ellipse画一个橙色的圆,然后将Canvas的宽度和高度绑定到Ellipse的宽 ...

  5. IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)

    ... 首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Con ...

  6. (转) IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)

    首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Context ...

  7. [置顶] IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)

    首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Context ...

  8. ArcGIS API for Flex实现GraphicsLayer上画点、线、面。

    目的: ArcGIS API for Flex实现GraphicsLayer上画点.线.面. 准备工作: 1.这次地图数据就用Esri提供的http://server.arcgisonline.com ...

  9. unity3d NavMeshAgent 寻路画线/画路径

    今天在群里看见有个小伙在问Game视图寻路时怎么画线 正好前几天写了个寻路,而且自己也不知道具体怎么在寻路时画线,所以决定帮帮他,自己也好学习一下 在百度查了一下资料,直接搜寻路画路径.寻路画线... ...

随机推荐

  1. （5）html表单

    本节解说: html的表单. form * <form> 标签用于为用户输入创建 HTML 表单. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. * < ...

  2. cocos2d制作动态光晕效果基础——blendFunc

    转自:http://www.2cto.com/kf/201207/144191.html 最近的项目要求动态光晕的效果. 何谓动态光晕?之前不知道别人怎么称呼这个效果, 不过在我看来,“动态光晕”这个 ...

  3. c# 轻量级 ORM 框架 之 Model解析 (四)

    关于orm框架设计,还有必要说的或许就是Model解析了,也是重要的一个环节,在实现上还是相对比较简单的. Model解析,主要用到的技术是反射了,即:把类的属性与表的字段做映射. 把自己的设计及实现 ...

  4. JQueryMobile页面跳转参数的传递解决方案

    在JQueryMobile开发手机端应用使用可能需要考虑相关的页面跳转带来的参数问题.因为JQueryMobile其实也是HTML5实践的结果.HTML5中有localStorage和sessionS ...

  5. 在C#中利用Nuget包使用SQLite数据库和Linq to SQLite

    本来是学习在VB中使用SQLite数据库和Linq to SQLite,结果先学习到了在C#中使用SQLite数据库和Linq to SQLite的方法,写出来与大家共同学习.(不知道算不算不务正业) ...

  6. cdoj 65 CD Making 水题

    CD Making Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/65 De ...

  7. 在C++中使用golang的协程

    开源项目cpp_features提供了一个仿golang协程的stackful协程库. 可以在c++中使用golang的协程,大概语法是这样的: #include <iostream> v ...

  8. Cocos2d-x 程序是如何开始运行与结束的

    题记:对于技术,我们大可不必挖得那么深,但一定要具备可以挖得很深的能力   问题的由来   怎么样使用 Cocos2d-x 快速开发游戏,方法很简单,你可以看看其自带的例程,或者从网上搜索教程,运行起 ...

  9. 你真的了解javascript吗

    原文地址:http://dmitry.baranovskiy.com/post/91403200 看了文章中五个小例子,写了写自己的理解 #demo1 if (!("a" in w ...

  10. 迷你MVVM框架 avalonjs 0.81发布

    本版本最大的改进是将视图的操作全鄣变成异步.详情如下: 管道符与短路与相混淆的BUG 重构on绑定,省得每次都重复绑定同一个事件回调.虽然addEventListener或attachEvent会忽略 ...