javascript+Canvas實現(xiàn)畫板功能
本文實例為大家分享了Canvas實現(xiàn)畫板功能的具體代碼，供大家參考，具體內(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)擊時則不會畫畫 } } } }</script></body>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ajax請求添加自定義header參數(shù)代碼2. ASP基礎(chǔ)知識VBScript基本元素講解3. Python requests庫參數(shù)提交的注意事項總結(jié)4. Kotlin + Flow 實現(xiàn)Android 應(yīng)用初始化任務(wù)啟動庫5. Gitlab CI-CD自動化部署SpringBoot項目的方法步驟6. 詳談ajax返回數(shù)據(jù)成功 卻進(jìn)入error的方法7. 利用CSS3新特性創(chuàng)建透明邊框三角8. ASP中解決“對象關(guān)閉時,不允許操作。”的詭異問題……9. asp知識整理筆記4（問答模式）10. 淺談SpringMVC jsp前臺獲取參數(shù)的方式 EL表達(dá)式
網(wǎng)公網(wǎng)安備