canvas画板多端实现

[toc]创建时间：2020-03-09；测试：chromev80.0.3987.122正常|小程序2.10.2正常PC端demo移动端实现body{margin:0;overscroll-behavior-y:contain;}。画板{宽度：100%；高度：300px；背景颜色：rgb（213、252、245）；}html代码/canvas>

jscode/*当lineWidth较小时，使用贝塞尔曲线测量的线与当前方法基本等效*/letmouseDown=false;constcanvas=document.getElementById('drawBoard');constctx=canvas.getContext('2d');canvas.width=window.innerWidth;constrect=canvas.getBoundingClientRect();/**画布标签距离屏幕的位置*/constcl=rect.left;constct=rect.top;constrandomColor=()=>{constcolor=`#${Math.floor(Math.random()*16777215).toString(16)}`;returncolor.padEnd(7,'f');}/**记录起始位置*/letsx='',sy='';constdraw=(x,y)=>{ctx.beginPath();ctx.lineWidth=5;ctx.strokeStyle=randomColor();Ctx.moveTo(sx,sy);/**将结束位置设置为下一个开始位置*/sx=x-cl;sy=y-ct;ctx.lineTo(sx,sy)ctx.stroke();}////PC端使用，只需要改成对应的事件名称即可，需要增加鼠标是否按下的判断canvas.addEventListener('touchstart',function(e){sx=e.touches[0].clientX-cl;sy=e.touches[0].clientY-ct;ctx.lineWidth=2;ctx.lineJoin='round'ctx.lineCap='round';ctx.shadowBlur=1;(0,0,0)';})canvas.addEventListener('touchmove',(e)=>{draw(e.touches[0].clientX,e.touches[0].clientY)})canvas.addEventListener('touchend',(e)=>{console.log('end');})/**清除画布*/handleClear=()=>{ctx.clearRect(0,0,canvas.width,canvas.height);}小程序实现方法wxml代码canvas=null;letctx=null;/**是否点击开始*/letstart=false;/**记录开始位置*/letstartX=0;letstartY=0;让canvasWidth=0;让canvasHeight=0;functionhandleDraw(x,y){ctx.beginPath();ctx.moveTo(startX,startY);/**将结束位置设置为下一个开始位置*/startX=x;开始Y=y；ctx.lineTo(x,y);ctx.stroke();}Page({data:{},onReady:function(){constquery=wx.createSelectorQuery()query.select('#drawBoard').fields({node:true,size:true}).exec((res)=>{canvas=res[0].nodectx=canvas.getContext('2d')constdpr=wx.getSystemInfoSync().pixelRatiocanvas.width=res[0].width*dprcanvas.height=res[0].height*dprctx.scale(dpr,dpr)ctx.lineWidth=2;ctx.strokeStyle='#5e5e5e';ctx.lineCap='round';ctx.lineJoin='round';//使用阴影反-别名ctx.shadowBlur=2;ctx.shadowColor='#5e5e5e';canvasWidth=canvas.width;canvasHeight=canvas.height;})},handleTouchStart(e){startX=e.touches[0].X;startY=e.touches[0].y;},handleTouchMove(e){//注意这里是changedToucheshandleDraw(e.changedTouches[0].x,e.changedTouches[0].y)},handleTouchEnd(e){},handleClear(){ctx.clearRect(0,0,画布宽度,画布高度);}})欢迎来到Github