纯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 相关文章推荐
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 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 JSON中文乱码的解决方法详解
2013/06/06 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python基础教程之自定义函数介绍
2014/08/29 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
Python tkinter label 更新方法
2018/10/11 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
优秀社区干部事迹材料
2014/02/03 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
战略合作协议书范本
2014/04/18 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
公司会议开幕词
2015/01/29 职场文书
介绍信怎么写
2015/01/30 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL
Python 全局空间和局部空间
2022/04/06 Python
java实现web实时消息推送的七种方案
2022/07/23 Java/Android