用javascript实现画板的代码


Posted in Javascript onSeptember 05, 2007

在控制台中输入 
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>
Javascript 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
js中的escape及unescape函数的php实现代码
Sep 04 #Javascript
一个符号插入器 中用到的js代码
Sep 04 #Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 #Javascript
一个用js实现控制台控件的代码
Sep 04 #Javascript
科讯商业版中用到的ajax空间与分页函数
Sep 02 #Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 #Javascript
给Javascript数组插入一条记录的代码
Aug 30 #Javascript
You might like
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
js charAt的使用示例
2014/02/18 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
python基于递归解决背包问题详解
2019/07/03 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python入门之基础语法学习笔记
2020/02/08 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
教师自我鉴定
2013/12/13 职场文书
创业计划书中包含的9个方面
2013/12/26 职场文书
园林资料员岗位职责
2013/12/30 职场文书
水电工岗位职责
2014/02/12 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
python内置模块之上下文管理contextlib
2022/06/14 Python