用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 相关文章推荐
一个基于jquery的图片切换效果
Jul 06 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
js实现导航吸顶效果
Feb 24 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
laypage+SpringMVC实现后端分页
Jul 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
php简单获取文件扩展名的方法
2015/03/24 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
学习vue.js计算属性
2016/12/03 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
通过C++学习Python
2015/01/20 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python实现桌面壁纸切换功能
2019/01/21 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
垃圾回收的优点和原理
2014/05/16 面试题
医院辞职信范文
2014/01/17 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
授权委托书(完整版)
2014/09/10 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
悬空寺导游词
2015/02/05 职场文书
加强党性修养心得体会
2016/01/21 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android