用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事件热键兼容ie|firefox
Dec 30 Javascript
js取整数、取余数的方法
May 11 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
python实现绘制树枝简单示例
2014/07/24 Python
wxPython窗口中文乱码解决方法
2014/10/11 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
Python 导入文件过程图解
2019/10/15 Python
python with语句的原理与用法详解
2020/03/30 Python
Django使用rest_framework写出API
2020/05/21 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
关于工作经历的证明书
2014/10/11 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
商铺门面租房协议书
2014/10/21 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
物业保安辞职信
2015/05/12 职场文书
学校教代会开幕词
2016/03/04 职场文书