涂鴉板簡單實現 Html5編寫屬于自己的畫畫板

2020-03-24 19:05:20

字體：大中小

來源：轉載

供稿：網友

最近了解到html5強大的繪圖功能讓我驚奇，于是，寫了個小玩意---涂鴉板，能實現功能有：畫畫，改色，調整畫筆大小html5的繪圖可以分為點，線，面，圓，圖片等，點和線，這可是所有平面效果的基點，有了這兩個東西，沒有畫不出來的東西，只有想不到的算法。先上代碼了：XML/HTML Code復制內容到剪貼板
BoxObj:function(){//畫布對象 this.CX=document.getElementById(this.Box); }, D2:function(){//2d繪圖對象 this.D2=this.CX.getContext( 2d ); }, Cricle:function(x,y,r,color){//畫圓 if(this.D2){ this.D2.beginPath(); this.D2.arc(x,y,r,0,Math.PI*2,true); this.D2.closePath(); if(color){ this.D2.fillStyle=color; } this.D2.fill(); } }, init:function(){//初始化 this.BoxObj(); this.D2(); } })
相信這里的簡單代碼大家都看得懂，主要就是創建了一個對象，包含創建畫布，創建2d對象，畫圓方法，和對象初始化方法。接下里前臺html頁面來調用這個對象/p 看代碼：JavaScript Code復制內容到剪貼板
varcolor= #000000 ;//初始化顏色 varsize=5;//初始化尺寸 document.getElementById('color1').onchange=function(){ color=this.value; }; document.getElementById('size').onchange=function(){ size=this.value; }; $.Draw.init();//初始化 vartag=false;//控制鼠標當前狀態并起到開啟油墨開關的作用 varcurrent={};//存儲鼠標按下時候的點 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.捕獲顏色空間和拖動條控件的change事件，從而獲取對應的顏色和尺寸的數值，存儲下來供下面畫線用2.初始化畫圖對象3.捕獲鼠標的按下，抬起和移動事件，關鍵在一個開關可以控制油墨好了，一個簡單的涂鴉板就好了，上我的書法：以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持phpstudy。原文鏈接：http://www.cnblogs.com/bob1314/p/3830220.htmlhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML5 canvas標簽實現刮刮卡效果

下一篇：不可輕視HTML5！App三年內將被html5頂替徹底消失