基于html5新标签canvas写的一个小画板_html/css_WEB-ITnose

最近刚学了canvas，写个小应用练习下

源代码

 1   2   3   4   5  ???文件  6    7  8    9  10 var drawable=false;11 $(function(){12     $("#drawOnBoard").css({"background-color":$("#backgroundcolorChooser").val()});13 });14 function changeBackgroundColor()15 {16     $("#drawOnBoard").css({"background-color":$("#backgroundcolorChooser").val()});17 }18 function setDrawable(sdrawable)19 {20     drawable=sdrawable;21 }22 function beginDrawPicture(event)23 {24     if(drawable==true)25     {26     var canvas=$("#drawOnBoard");27     canvas=canvas[0];28     var content=canvas.getContext("2d");29     30     var mouseX=event.clientX;31     var mouseY=event.clientY;32     33     content.beginPath();34     35     content.arc(mouseX,mouseY,$("#slider-fill").val()*2,0,Math.PI*2,true);36     37     content.closePath();38     content.fillStyle=$("#pencolorChooser").val();39     content.fill();40     }41 }42  43  44 .chooseBar{45     display:inline-block;46     width:200px;47 }48 div.ui-input-text{49     display:inline-block;50     width:270px;51 }52 div.ui-slider{53     display:inline-block;54     width:300px;55 }56  57  58 59  60   61 62 改变画笔颜色： 63  64 改变画板颜色： 65  66 改变画笔大小： 67

      
查看更多关于基于html5新标签canvas写的一个小画板_html/css_WEB-ITnose的详细内容...
        
          声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did107252

更新时间：2022-11-17 阅读：35次