用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>

赞 (0)

相关推荐

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

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

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

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

    iOS简单画板开发案例分享

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

  • 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下实现基本绘画板功能的简单方法

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

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

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

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

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

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

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

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

    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

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

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

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

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

    在控制台中输入  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编写棋盘覆盖代码详解

    JavaScript编写棋盘覆盖代码详解

    一.前言 之前做了一个算法作业,叫做棋盘覆盖,本来需要用c语言来编写的,但是因为我的c语言是半桶水(哈哈),所以索性就把网上的c语言写法改成JavaScript写法,并且把它的覆盖效果显示出来 二.关键代码 <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

  • javascript简易画板开发

    javascript简易画板开发

    本文实例为大家分享了制作javascript简易画板的方法,供大家参考,具体内容如下 html: <body id="bodys"> <span id="eraser"> 清除所有 </span> <span id="colorbtn"> 笔画颜色 </span> <input type="range" name="ram" id="

  • javascript 打字游戏实现代码

    javascript 打字游戏实现代码

    效果如图所示:下面是核心代码 复制代码 代码如下: GAME = { //随机产生字母 randLetter: function() { var arrLetter = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K&qu

  • javascript密码强度校验代码（两种方法）

    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自定义滚动条实现代码

    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

随机推荐