纯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判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
js调用刷新界面的几种方式
May 03 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
layui原生表单验证的实例
Sep 09 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 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 header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
python计算文本文件行数的方法
2015/07/06 Python
python并发编程之线程实例解析
2017/12/27 Python
python导入坐标点的具体操作
2019/05/10 Python
python中的数据结构比较
2019/05/13 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
PyTorch安装与基本使用详解
2020/08/31 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
在线课程:Skillshare
2019/04/02 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
new修饰符是起什么作用
2015/06/28 面试题
经典的班主任推荐信
2013/10/28 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
人事任命书怎么写
2014/06/05 职场文书
社区创先争优承诺书
2014/08/30 职场文书
家长会主持词开场白
2015/05/29 职场文书
歌剧魅影观后感
2015/06/05 职场文书
失恋33天观后感
2015/06/11 职场文书
SQL注入详解及防范方法
2021/12/06 MySQL
netty 实现tomcat的示例代码
2022/06/05 Servers