javascript+Canvas實(shí)現(xiàn)畫(huà)板功能
本文實(shí)例為大家分享了Canvas實(shí)現(xiàn)畫(huà)板功能的具體代碼，供大家參考，具體內(nèi)容如下
CSS樣式代碼
body, html { text-align: center; padding-top: 20px; /*margin: 0;*/ }canvas { box-shadow: 0 0 10px #333; margin: 0 auto; /*position: absolute; left: 0; border: 1px solid red;*/}
這是主體代碼
<body onload='draw()'> <canvas height='600'> </canvas> <script> function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext(’2d’); //涂鴉 //添加鼠標(biāo)按下事件 canvas.onmousedown=function(e){ var ev=e||window.event;//兼容性 var x=ev.clientX-canvas.offsetLeft; var y=ev.clientY-canvas.offsetTop; ctx.strokeStyle=’red’; ctx.lineWidth=10; ctx.beginPath(); ctx.moveTo(x,y); //onmousemove canvas.onmousemove=function(e){ var ev=e||window.event;//兼容性 var x=ev.clientX - canvas.offsetLeft; var y=ev.clientY - canvas.offsetTop; ctx.lineTo(x,y); ctx.stroke(); } canvas.onmouseup=function(){ canvas.onmousemove='';//當(dāng)鼠標(biāo)不點(diǎn)擊時(shí)則不會(huì)畫(huà)畫(huà) } } } }</script></body>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. python實(shí)現(xiàn)讀取類(lèi)別頻數(shù)數(shù)據(jù)畫(huà)水平條形圖案例2. python中PyQuery庫(kù)用法分享3. python操作數(shù)據(jù)庫(kù)獲取結(jié)果之fetchone和fetchall的區(qū)別說(shuō)明4. PHP獲取時(shí)間戳等相關(guān)函數(shù)匯總5. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能6. Ajax實(shí)現(xiàn)頁(yè)面無(wú)刷新留言效果7. php5.6不能擴(kuò)展redis.so的解決方法8. python 爬取嗶哩嗶哩up主信息和投稿視頻9. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫(huà)特效10. AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作詳解【java后臺(tái)】
網(wǎng)公網(wǎng)安備