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

今天需要在网页上画一个图谱,想到用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, '', '测试');
}

(0)

相关推荐

  • android实现简单的画画板实例代码

    直接看代码,注释都写清楚了 复制代码 代码如下: public class MainActivity extends Activity { private ImageView iv; private Bitmap baseBitmap; private Canvas canvas; private Paint paint; @Override protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedIns

  • JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)

    本文实例讲述了JS基于ocanvas插件实现的简单画板效果.分享给大家供大家参考,具体如下: 使用ocanvas做了个简单的在线画板. ocanvas参考:http://ocanvas.org/ 效果如下: 主要代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>oCanvas Example</title> <meta na

  • Javascript HTML5 Canvas实现的一个画板

    本文实例为大家分享了HTML5 Canvas实现的一个画板代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DEMO6:自定义画板</title> </head> <body> <canvas id="canvas" width="600" he

  • 分享一个iOS下实现基本绘画板功能的简单方法

    代码部分 TouchView.h 复制代码 代码如下: #import <UIKit/UIKit.h>    @interface TouchView : UIView  {      NSMutableArray *points;      NSArray *points_all;      CGContextRef context;      UIColor *paint_clr;  }  @property (strong,nonatomic) NSMutableArray *point

  • html5+javascript制作简易画板附图

    见图: 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <meta http-equiv="content-type" Content="text/html;charset=utf-8"> <head> <title>简易画板</title> <style> #eraseImg{ /*橡皮样式*//**/ border:solid; color:gra

  • Android采用双缓冲技术实现画板

    本文实例为大家分享了Android实现画板的具体代码,采用的技术是双缓冲技术,供大家参考,具体内容如下 1.双缓冲技术的概念 所谓的双缓冲技术其实很简单,当程序需要在指定的View上进行绘制时,程序并不需要直接绘制到该View组件,而是先绘制到一个内存中的Bitmap图片上(就是缓冲),等内存中的Bitmap绘制好之后,再一次性将Bitmap绘制到View组件上. 2.Android采用双缓冲实现画板  实现的思路: 1).定义一个内存中图片,将他作为缓冲区Bitmap cacheBitmap

  • 用javascript实现画板的代码

    在控制台中输入  db.drawCircle([50,50],20,"black");  db.drawLine([5,5],[36,44],"red");  可以看到效果  复制代码 代码如下: <body style="margin:0px;">  </body>  <script>      function DrawingBoard(width,height,size)      {          

  • iOS简单画板开发案例分享

    最近在学习Quartz2D,学习了一个简单画板的实现,现在把实现过程记录一下. 主要用到的点就是画线,截屏,绘制图片,选择图片,以及保存所有绘制的线. 首先在storyboard上布局好控件,设置约束等等,最后的效果是这样: 自定义画板DrawView,使用时可能是从xib中加载,也可能是手动创建,所以创建对象的方法需要实现两个: #import <UIKit/UIKit.h> @interface DrawView : UIView /** 线宽 */ @property (nonatomi

  • Android多媒体之画画板开发案例分享

    先看看效果: 其实画画板的原理很简单,就是首先记录下按下屏幕的点,然后每移动一下就让这两次移动的点连线,周而复始,图像就由很多条直线构成了. 核心代码 : public class MainActivity extends Activity implements OnClickListener,OnSeekBarChangeListener { private View red_view,green_view,blue_view; //控制画笔颜色的三块区域 private SeekBar se

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

    今天需要在网页上画一个图谱,想到用JS,经过学习,和网上搜索,经过整理优化得到下面代码,注意不是用HTML5的canvas,而是用的纯js 复制代码 代码如下: /* 以下画点,画线,画圆的方法,都不是用HTML5的canvas,而是用的纯js 用到了一些数学的三角函数方法 以下代码是课堂随机写出,没有做更多优化 */ /* 面向对象封装,添加绘制矩形 进一步优化代码 */ var Graphics = function(divId, color){ this.divId = divId; th

  • 纯 JS 实现放大缩小拖拽功能(完整代码)

    前言 最近团队需要做一个智能客服悬浮窗功能,需要支持拖动.放大缩小等功能,因为这个是全局插件,为了兼容性考虑全部使用原生 JS 实现,不引用任何第三方库或者插件.开发过程中遇到的一些问题及解决方法,在这里和大家分享交流一下. 注:下文出现的"采宝"二字,为这个功能的产品名. 先看效果 看这个效果,相信大部分开发都会觉得实现起来比较容易.在实际开发中,笔者总结了三个主要的坑点,及其解决方案. 三个坑点 拖拽采宝时会导致采宝放大缩小 采宝显示在屏幕边界时被遮挡显示不全 采宝放大和缩小后,位

  • 超级可爱纯js网页时钟

    //oObj input requires that a matrix filter be applied. //deg input defines the requested angle of rotation. var deg2radians = Math.PI * 2 / 360; function MatrixFilter(obj) { if(!obj.filters)return; //alert(obj.filters.item(0)); var Matrix; for(p in o

  • 纯JS实现根据CSS的class选择DOM

    // 网上参考的,自己修改了一部分 // 代码如下,纯JS,要求浏览器支持 getElementsByClassName 方法 复制代码 代码如下: <script type="text/javascript"> function getElementsByClassName(classname,node){ node = node || window.document; if(node.getElementsByClassName){ return node.getEle

  • 纯JS打造网页中checkbox和radio的美化效果

    图片素材: 效果图: <head> <style> BODY { FONT-FAMILY: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Neue", Arial, sans-serif; FONT-SIZE:62.5% } LABEL { MARGIN-RIGHT: 1.2em } .custom-checkbox { POSITION: relative } .custom-rad

  • 纯js代码制作的网页时钟特效【附实例】

    纯js代码制作的网页时钟特效,需要的码农可以拿去看一下.给大家做个参考. <HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META content="MSHTML 6.00.6000.16414" name=GENERATOR></HEAD> <BODY> <DIV style

  • 纯JS实现出生日期[年月日]下拉菜单效果

    在制作网页时,可能需要给用户提供注册帐号页面,用户注册 设计很多信息,其中就有 关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用JS实现年.月.日3个下拉框的日期选择.具体代码如下: 1.新建一个js文件,如birthday.js; function DateSelector(selYear, selMonth, selDay) {//定义函数 this.selYear = selYear; this.selMonth = s

  • 纯js实现html转pdf的简单实例(推荐)

    项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式. 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf. 咋不上天呢-- 查了一下,能够实现html转pdf的方法还是挺多的,大概有以下几种: 1.大部分浏览器就有这个功能.然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass. 2.利用第三方工具.我找到了一种利用wkhtmltopdf这种工具来导出的方案,自己在我们的项目中试

  • 纯js实现无限空间大小的本地存储

    好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了, 项目地址https://github.com/xueduany/localstore, demo见http://xueduany.github.io/localstore/, 下面给大家简单说说大概原理,具体细节和异常处理后面有机会在单独说 先说下突破本地localStorage的原理,官方原话是这么说的http://www.w3.org/TR/2013/PR-webstor

  • 纯js实现瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax模拟数据图片后,是将整个页面的所有图片都重新定位一次. 3. 程序是等所有图片加载完成后再读取图片的尺寸,实际中肯定不能这样做. 4. 实际项目中,应该由后台程序给出图片尺寸值,在js代码中直接使用图片的width属性. 本程序思路: html结构: <body> <div id="

随机推荐