用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 相关文章推荐
Extjs4 类的定义和扩展实例
Jun 28 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
DOM 事件流详解
Jan 20 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
Vue ​v-model相关知识总结
Jan 28 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
PHP脚本数据库功能详解(上)
2006/10/09 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
js 方法实现返回多个数据的代码
2009/04/30 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
深入解答关于Python的11道基本面试题
2017/04/01 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
python+opencv实现动态物体识别
2018/01/09 Python
详解python中eval函数的作用
2019/10/22 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
行政文秘岗位职责范本
2014/02/10 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
国培计划培训感言
2014/03/11 职场文书
社区科普工作方案
2014/06/03 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS