javascript+Canvas實現(xiàn)畫板功能
更新時間:2020年06月23日 15:59:04 作者:許俊活
這篇文章主要為大家詳細介紹了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 id="canvas" width="800" height="600"> </canvas> <script> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext('2d'); //涂鴉 //添加鼠標按下事件 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="";//當鼠標不點擊時則不會畫畫 } } } } </script> </body>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
微信 java 實現(xiàn)js-sdk 圖片上傳下載完整流程
這篇文章主要介紹了微信 java 實現(xiàn)js-sdk 圖片上傳下載完整流程的相關資料,需要的朋友可以參考下2016-10-10深入淺析JS Function()構(gòu)造函數(shù)
這篇文章給大家介紹了js function()構(gòu)造函數(shù)的知識以及關于function()構(gòu)造函數(shù)需要注意的幾個要點,本文介紹的非常不錯,具有參考借鑒價值,感興趣的朋友一起看下吧2016-08-08Javascript中valueOf與toString區(qū)別淺析
Javascript中valueOf與toString區(qū)別淺析,需要的朋友可以參考一下2013-03-03