纯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 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 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
一些星际专用术语解释
2020/03/04 星际争霸
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
python实现弹跳小球
2019/05/13 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
通息工程毕业生自荐信
2013/10/16 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
银行内勤岗位职责
2014/04/09 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
2015个人半年总结范文
2015/03/09 职场文书
爱国主义电影观后感
2015/06/18 职场文书
学校运动会简讯
2015/07/20 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
浅谈MySQL函数
2021/10/05 MySQL
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技