纯js网页画板(Graphics)类简介及实现代码


Posted in Javascript onDecember 24, 2012

今天需要在网页上画一个图谱,想到用JS,经过学习,和网上搜索,经过整理优化得到下面代码,注意不是用HTML5的canvas,而是用的纯js

/* 以下画点,画线,画圆的方法,都不是用HTML5的canvas,而是用的纯js 
用到了一些数学的三角函数方法 
以下代码是课堂随机写出,没有做更多优化 
*/ 
/* 
面向对象封装,添加绘制矩形 
进一步优化代码 
*/ 
var Graphics = function(divId, color){ 
this.divId = divId; 
this.color = color; //'#000000'或'black' 
this.drawPoint= function(x,y){ 
//画点 
var oDiv=document.createElement('div'); 
oDiv.style.position='absolute'; 
oDiv.style.height='2px'; 
oDiv.style.width='2px'; 
oDiv.style.backgroundColor=this.color; 
oDiv.style.left=x+'px'; 
oDiv.style.top=y+'px'; 
//document.body.appendChild(oDiv); 
return oDiv;//注意:返回的值是一个dom节点,但并未追加到文档中 
}; 
this.drawLine = function(x1,y1,x2,y2){ 
//画一条线段的方法。(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(drawPoint(width+x1,i+y1)); 
} 
} 
if(y<0){//有时候是倒着画线的 
for(var i=0;i>y;i--){ 
var width=x/y*i 
{ 
frag.appendChild(drawPoint(width+x1,i+y1)); 
} 
} 
} 
}//end if 
else { 
if(x>0)//正着画线是这样的 
for(var i=0;i<x;i++){ 
var height=y/x*i 
{ 
frag.appendChild(drawPoint(i+x1,height+y1)); 
} 
} 
if(x<0){//有时候是倒着画线的 
for(var i=0;i>x;i--){ 
var height=y/x*i 
{ 
frag.appendChild(this.drawPoint(i+x1,height+y1)); 
} 
} 
}//end if 
} 
document.getElementById(this.divId).appendChild(frag); 
}; 
this.drawCircle = function(r, x, y){ 
//画个圆。x,原点横坐标;y,原点纵坐标;r,半径 
var frag=document.createDocumentFragment(); 
for(var degree=0;degree<360;degree+=2){ 
var x1=r*Math.sin(degree*Math.PI/180); 
var y1=r*Math.cos(degree*Math.PI/180); 
frag.appendChild(drawPoint(x+x1,y+y1)); 
} 
document.body.appendChild(frag); 
}; 
this.dragCircle = function(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(drawPoint(x1+x2,y1+y2)); 
} 
document.getElementById(this.divId).appendChild(frag); 
}; 
this.drawRect = function(startX, startY, lengthX, lengthY, newId, text){ 
//(startX, startY)起点坐标,lengthX,长 lengthY,宽 newId,新创建的div的Id text,div内容 
var myDiv=document.createElement('div'); 
if(newId){ 
myDiv.id=newId; 
} 
myDiv.style.width= lengthX + 'px'; 
myDiv.style.height= lengthY + 'px'; 
myDiv.style.backgroundColor = this.color; 
myDiv.style.left=startX + 'px'; 
myDiv.style.top=startY + 'px'; 
myDiv.style.textAlign= 'center'; 
if(text){ 
myDiv.innerHTML = text; 
} 
document.getElementById(this.divId).appendChild(myDiv); 
}; 
}; 
window.onload=function(){ 
var g = new Graphics('div1', 'red'); 
g.drawLine(500,30,0,30); 
g.color = '#CDC9C9'; 
g.drawRect(10,10,200,200, '', '测试'); 
}
Javascript 相关文章推荐
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
js实现汉字排序的方法
Jul 23 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
详解小程序循环require之坑
Mar 08 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
Knockoutjs快速入门(经典)
Dec 24 #Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 #Javascript
javascript 星级评分效果(手写)
Dec 24 #Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 #Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 #Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 #Javascript
ajax中get和post的说明及使用与区别
Dec 23 #Javascript
You might like
用PHP+MySql编写聊天室
2006/10/09 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
菜单效果
2006/10/14 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Python版名片管理系统
2018/11/30 Python
Python安装OpenCV的示例代码
2020/03/05 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
如何编写python的daemon程序
2021/01/07 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
毕业自我鉴定怎么写
2014/03/25 职场文书
2014年党务工作总结
2014/11/25 职场文书
个人更名证明
2015/06/23 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏