制作涂鸦板,儿童涂鸦画板是怎么做的

　　最近惊讶地了解到html5强大的画图功能，于是写了一个涂鸦板，可以实现画图、改变颜色、调整画笔大小等功能。

　　Html5画图可以分为点、线、面、圆、图片等。点和线，是所有平面效果的基本点。有了这两样东西，就没有画不出来的东西，只有想不到的算法。

　　代码优先：

　　html

　　XML/HTML代码将内容复制到剪贴板body style= cursor:pointer canvas id= myca vas width= 1024 height= 400 style= border:solid 4px # 00000 /canvas！-canvas-input type= color id= color 1 name= color 1 /！-color setter-output name= a for= color 1 on form input= innerhtml=color 1 . value /output input type= range name= points id= size min= 5 max= 20 ！-拖动条形/主体效果：

　　好了，一个简单的绘图界面就做好了。我们开始写一些画线代码吧。

　　代码将内容复制到剪贴板$。draw={ }；$.扩展($。draw，{d2: ，cx: ，box: mycavas ，//canvas id box obj:function(){//canvas object this . CX=document . getelementbyid(this . box)；}、D2:function(){//2d绘图对象this。D2=这个。CX . get context( 2d )；}，cricle: function (x，y，r，color){//画一个圆if(this。D2){这个。D2 . begin path()；这个。D2.arc(x，y，r，0，数学。PI*2，真)；这个。D2 . close path()；如果(颜色){这个。D2.fillStyle=color}这个。D2 . fill()；} }，init:function(){//初始化这个。box obj()；这个。D2()；}})这里的简单代码相信大家都能理解，主要是创建一个对象，包括创建画布，创建2d对象，画圆，初始化对象。

　　转到前台html页面调用此对象/p。

　　看看代码：

　　代码将内容复制到剪贴板var color= # 00000//初始化color varsize=5；//初始化大小document . getelementbyid( color 1 )。onchange=function(){ color=this . value；};document.getElementById(size )。onchange=function(){ size=this . value；};$ . draw . init()；//initialize vartag=false；//控制鼠标当前状态，起到打开墨迹开关var current={ }；//鼠标按下时存储点document . onmousedown=function(option){//鼠标按下事件current . x=option . x；current . y=option . y；$.Draw.Cricle(option.x，option.y，size，color)；tag=true} document . onmouseup=function(){//鼠标抬起事件tag=false} document . onmousemove=function(option){//鼠标移动事件if (tag) {if (size=0) {$。draw.cricle (option.x，option.y，size，color)；} } }这段代码主要有如下几个意思

　　1.捕获颜色空间和拖动条控件的变化事件，从而获得相应的颜色和大小值，并存储起来供下面画线使用。

　　2.初始化绘图对象。

　　3.捕捉鼠标的按压、抬起和移动事件。关键是有开关可以控制墨水。

　　好吧，只是一个简单的涂鸦板，放上我的书法：

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。原文链接：http://www.cnblogs.com/bob1314/p/3830220.html

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。