纯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, '', '测试');
}

时间: 2012-12-22

分享一个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

iOS简单画板开发案例分享

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

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实现简单的画画板实例代码

直接看代码,注释都写清楚了 复制代码 代码如下: 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

Javascript HTML5 Canvas实现的一个画板

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

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

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

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)      {          

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

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

JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】

本文实例讲述了JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果.分享给大家供大家参考,具体如下: 基于Sketch.js,实现了物体触碰检测(蝌蚪会遇到障碍物以及聪明的躲避鼠标的点击),随机运动,聚集算法等. 已经具备了游戏的基本要素,扩展一下可以变成一个不错的 HTML5 游戏. 演示效果如下: 完整代码如下: <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-

微信小程序picker组件简单用法示例【附demo源码下载】

本文实例讲述了微信小程序picker组件简单用法.分享给大家供大家参考,具体如下: picker滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器(mode=selector),时间选择器(mode=time),日期选择器(mode=date),默认是普通选择器. 具体功能说明如下: 普通选择器:mode=selector 属性名 类型 默认值 说明 range Array [] mode为selector时,range有效 value Number 0 mode为selecto

jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】

本文实例讲述了jQuery插件FusionCharts实现的2D饼状图效果.分享给大家供大家参考,具体如下: 1.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>FusionCharts2D饼图</title> <script src="js/jquery-1.4.2.min.js"></scr

JS实现可编辑的后台管理菜单功能【附demo源码下载】

本文实例讲述了JS实现可编辑的后台管理菜单功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

Android实现基于滑动的SQLite数据分页加载技术(附demo源码下载)

本文实例讲述了Android实现基于滑动的SQLite数据分页加载技术.分享给大家供大家参考,具体如下: main.xml如下: <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/action_settings" android:orderInCategory="100" android:showAs

JS禁用页面上所有控件的实现方法(附demo源码下载)

本文实例讲述了JS禁用页面上所有控件的实现方法.分享给大家供大家参考,具体如下: 利用页面元素的特征,可以捕捉到所有元素. function DisableElements(container,blnHidenButton) { if (!container) return; var aEle; if (navigator.appName =="Microsoft Internet Explorer") //IE { for (var i=0;i<container.all.le

JS模拟简易滚动条效果代码(附demo源码)

本文实例讲述了JS模拟简易滚动条效果的方法.分享给大家供大家参考,具体如下: 使用Js模拟滚动条.简易模式,类似手机上常见的滚动条. 效果如下: Js代码如下: var scrollMoveObj = null, scrollPageY = 0, scrollY = 0; var scrollDivList = new Array(); // obj需要添加滚动条的对象 w滚动条宽度 className滚动条样式名称 // obj元素 必须指定高度,并设置overflow:hidden; //

Java GUI编程之贪吃蛇游戏简单实现方法【附demo源码下载】

本文实例讲述了Java GUI编程之贪吃蛇游戏简单实现方法.分享给大家供大家参考,具体如下: 例子简单,界面简陋 请见谅 项目结构如下 Constant.jvava 代码如下: package snake; /** * * @author hjn * */ public class Constant { /** * 蛇方移动方向:左边 */ public static final int LEFT = 0; /** * 蛇方移动方向:右边 */ public static final int R

JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】

本文实例讲述了JS+HTML5实现的前端购物车功能插件.分享给大家供大家参考,具体如下: 最近做一个商城,需要用到一个简答的购物车功能,当然,后端实现比较容易,,这里重点还是讲一下前端的JS插件. 从源代码里面没看出来,它叫啥,好像叫:ctshop .js,不管啦,反正我提供下载就好,我做了一些简单的修复,支持了中文 这个插件使用了HTML5的新特效:storage ,就是游览器数据库的功能,这跟之前把数据存在cookies里面原理是相识的,这样的好处在于用户刷新页面,数据还在,,又不需要跟后端