用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)
{
size=size||3
var container=document.createElement("div");
this.container=container;
container.runtimeStyle.width=(width)*size+"px";
container.runtimeStyle.height=(height)*size+"px";
container.runtimeStyle.margin="0px";
//container.style.border="solid 1px blue";
var count=0;
for(var y=0;y<height;y++)
{
for(var x=0;x<width;x++)
{
var curr=document.createElement("div");
curr.runtimeStyle.height=size+"px";
curr.runtimeStyle.width=size+"px";
curr.runtimeStyle.display="inline";
curr.runtimeStyle.overflow="hidden";
curr.style.backgroundColor="green";
curr.src="";
container.appendChild(curr);
}
}
//alert(curr.currentStyle.display);
//document.body.appendChild(container);
this.drawLine=function(start,end,color)
{
var dx=start[0]-end[0];
var dy=start[1]-end[1];
var x,y;
if( Math.abs(dx) > Math.abs(dy) )
{
for(var x=start[0];x!=end[0]+(end[0]-start[0])/Math.abs(end[0]-start[0]);x+=(end[0]-start[0])/Math.abs(end[0]-start[0]) )
{
y=Math.round((x-start[0])/dx*dy+start[1]);
this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;
}
}
else
{
for(var y=start[1];y!=end[1]+(end[1]-start[1])/Math.abs(end[1]-start[1]);y+=(end[1]-start[1])/Math.abs(end[1]-start[1]) )
{
x=Math.round((y-start[1])/dy*dx+start[0]);
this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;
}
}
}
this.drawCircle=function(m,R,color)
{
for(var r=0;r<=Math.floor(Math.sqrt(R*R-r*r));r++)
{
x=m[0]+r;y=m[1]+Math.floor(Math.sqrt(R*R-r*r));
this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;
x=m[0]-r;y=m[1]+Math.floor(Math.sqrt(R*R-r*r));
this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;
x=m[0]+r;y=m[1]-Math.floor(Math.sqrt(R*R-r*r));
this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;
x=m[0]-r;y=m[1]-Math.floor(Math.sqrt(R*R-r*r));
this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;
y=m[1]+r;x=m[0]+Math.floor(Math.sqrt(R*R-r*r));
this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;
y=m[1]-r;x=m[0]+Math.floor(Math.sqrt(R*R-r*r));
this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;
y=m[1]+r;x=m[0]-Math.floor(Math.sqrt(R*R-r*r));
this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;
y=m[1]-r;x=m[0]-Math.floor(Math.sqrt(R*R-r*r));
this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;
}
}
this.appendto=function(parent)
{
parent.appendChild(this.container);
}
this.drawPoint=function(p,color)
{
this.container.childNodes[this.trans(p)].style.backgroundColor=color;
}
this.trans=function(p)
{
return p[0]+p[1]*width;
}
container=null;
}
function Console(width,height,command)
{
var container=document.createElement("div");
this.container=container;
container.runtimeStyle.width=(width);
container.runtimeStyle.height=(height);
container.runtimeStyle.margin="0px";
container.runtimeStyle.backgroundColor="black";
container.runtimeStyle.fontFamily="Terminal";
container.runtimeStyle.color="white";
container.runtimeStyle.fontSize="16px";
this.output=document.createElement("div");
container.appendChild(this.output);
container.innerHTML+="js>"
this.input=document.createElement("input");
container.appendChild(this.input);
this.input.runtimeStyle.backgroundColor="black";
this.input.runtimeStyle.borderWidth="0px";
this.input.runtimeStyle.color="white";
this.input.runtimeStyle.fontFamily="Terminal";
this.input.runtimeStyle.width="90%"
this.input.runtimeStyle.fontSize="16px"
this.input.runtimeStyle.position="relative";
this.input.runtimeStyle.top="2px";
command=command||function(str)
{
var e;
try{
var r=eval(str);
} catch(e) {
return "Bad command";
}
return r;
}
this.run=function(str)
{
this.input.parentNode.childNodes[0].innerHTML+=str+'<br/>'
this.input.parentNode.childNodes[0].innerHTML+=(command(str)+"<br/>")
}
this.input.command=function()
{
this.parentNode.childNodes[0].innerHTML+=this.value+'<br/>'
this.parentNode.childNodes[0].innerHTML+=(command(this.value)+"<br/>")
}
this.input.onkeyup=new Function("e","e=e||event;if(e.keyCode!=13)return;this.command();this.value='';");
this.appendto=function(parent)
{
parent.appendChild(this.container);
}
container=null;
}
var c=new Console("100%","50%");
c.appendto(document.body);
c.run("window.db=new DrawingBoard(100,100);document.body.appendChild(db.container);");
</script>
相关推荐
-
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
-
分享一个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
-
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
-
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基于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
-
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) {
-
javascript实现画板功能
本文实例为大家分享了javascript实现画板功能的具体代码,供大家参考,具体内容如下 画板功能的实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } b
-
JavaScript编写棋盘覆盖代码详解
一.前言 之前做了一个算法作业,叫做棋盘覆盖,本来需要用c语言来编写的,但是因为我的c语言是半桶水(哈哈),所以索性就把网上的c语言写法改成JavaScript写法,并且把它的覆盖效果显示出来 二.关键代码 <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl
-
javascript简易画板开发
本文实例为大家分享了制作javascript简易画板的方法,供大家参考,具体内容如下 html: <body id="bodys"> <span id="eraser"> 清除所有 </span> <span id="colorbtn"> 笔画颜色 </span> <input type="range" name="ram" id="
-
javascript 打字游戏实现代码
效果如图所示:下面是核心代码 复制代码 代码如下: GAME = { //随机产生字母 randLetter: function() { var arrLetter = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K&qu
-
javascript密码强度校验代码（两种方法）
先看效果图: javascript密码强度校验代码,具体实现思路不多说了,请看下面代码和demo. 第一种方法: /* *密码安全程度 *return :全部为字母或者数字,或者密码长度小于 *return : 字母数字组成,或者字母特殊字符,或者数字和特殊字符 *return : 字母和数字和特殊字符 */ String.prototype.passwordStrength=function(){ if(this.length> && this.length<=) retur
-
JavaScript图片轮播代码分享
为大家分享的JavaScript图片轮播代码如下 <!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"> <head> <meta
-
javascript自定义滚动条实现代码
在工作中经常会遇到内容会超出固定的一个范围,超出的内容一般会使用到滚动条来滚动显示. 但是用浏览器默认的滚动条经常被产品经理鄙视,可是用css却改变不了滚动条的样式,还好,有万能的js ^_^~~ 网上有各种各样的插件,但最顺手的还是自己写的,还可以一边撸一边当学习,自己动手丰衣足食 (*^__^*) 其中这三个问题深深地困扰我: 1.滚动条高度 2.每次点击向上.向下按钮的时候滚动条应该移动多少距离 3.每拖动1px滚动条,页面需要移动多少? 整个的框架大概是长这样的: 先来看看第一个问题.
-
javascript 缓冲效果实现代码 推荐
菜鸟版代码如下: 理解这段代码就基本上掌握了 复制代码 代码如下: function f_s() { var obj = document.getElementById("top"); obj.style.display = "block"; obj.style.height = "1px"; var sw = function () { var s_width = parseInt(obj.style.height); if (s_width
-
javascript里使用php代码实例
本文实例讲述了javascript里使用php代码的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script type="text/javascript" > <?php if (!empty($searchResult)):?> $.searchModule.init({display:<?php echo MAX_KEYWORDS_DISPLAY_COUNT; ?>, mode:<?php echo $searc