html5如何實現(xiàn)畫板畫筆功能

這篇文章主要介紹了html5如何實現(xiàn)畫板畫筆功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　實現(xiàn)畫板畫筆功能，效果如下：

　　1 <div>

　　2     <!--畫板-->

　　3     <canvas id="box1" height="400" width="400" style="background-color: antiquewhite"></canvas>

　　4     <!--保存并顯示鼠標X軸位置-->

　　5     <label id="lab_X"></label>

　　6     <!--保存并顯示鼠標Y軸位置-->

　　7     <label id="lab_Y"></label>

　　8 </div>

　　1 $（function （） {

　　2             var canvas = document.getElementById（"box1"）;

　　3             if （canvas == null）

　　4                 return false;

　　5             var context = canvas.getContext（"2d"）;

　　6             //標記開始書寫

　　7             var start = false;

　　8             $（canvas）。mousemove（function （event） {

　　9                 //顯示當前鼠標位置

　　10                 $（"#lab_X"）。text（event.pageX）;

　　11                 $（"#lab_Y"）。text（event.pageY）;

　　12                 if （start） {

　　13                     context.lineTo（event.pageX, event.pageY）;

　　14                     context.stroke（）;

　　15                 }

　　16             }）;

　　17             //鼠標按下，開始書寫

　　18             $（canvas）。mousedown（function （） {

　　19                 context.beginPath（）;

　　20                 context.moveTo（$（"#lab_X"）。text（）， $（"#lab_Y"）。text（））;

　　21                 start = true;

　　22             }）;

　　23             //鼠標抬起，結(jié)束書寫

　　24             $（canvas）。mouseup（function （） {

　　25

　　26                 start = false;

　　27                 context.closePath（）;

　　28             }）;

　　29         }）;

感謝你能夠認真閱讀完這篇文章，希望小編分享的“html5如何實現(xiàn)畫板畫筆功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!