js canvas实现写字动画效果

2023-09-05 03:25:05 206

#canvas{ display:block; margin:0auto; } #controller{ margin:0auto; } .op_btn{ float:right; margin:10px0010px; border:2pxsolid#aaa; width:80px; height:40px; line-height:40px; font-size:20px; text-align:center; border-radius:5px5px; cursor:pointer; background-color:white; font-weight:bold; font-family:MicrosoftYahei,Arial; } .op_btn:hover{ background-color:#def; } .clearfix{ clear:both; } .color_btn{ float:left; margin:10px10px00; border:5pxsolidwhite; width:40px; height:40px; border-radius:5px5px; cursor:pointer; } .color_btn:hover{ border:5pxsolidviolet; } .color_btn_selected{ border:5pxsolidblueviolet; } #black_btn{ background-color:black; } #blue_btn{ background-color:blue; } #green_btn{ background-color:green; } #red_btn{ background-color:red; } #orange_btn{ background-color:orange; } #yellow_btn{ background-color:yellow; }

varcanvasWidth=Math.min(800,$(window).width()-20);//如果屏幕小于800px，则取值为屏幕大小宽度，便于移动端的展示，-20是为了使得米字格不紧贴于边缘 varcanvasHeight=canvasWidth; varstrokeColor="black"; varisMouseDown=false;//鼠标按下时候的状态 varlastLoc={x:0,y:0};//鼠标上一次结束时的位置 varlastTimestamp=0;//上一次时间，与笔刷粗细有关 varlastLineWidth=-1;//笔刷粗细 varcanvas=document.getElementById("canvas"); varcontext=canvas.getContext("2d"); canvas.width=canvasWidth; canvas.height=canvasHeight; $("#controller").css("width",canvasWidth+"px"); drawGrid();//画米字格 $("#clear_btn").click( function(e){ context.clearRect(0,0,canvasWidth,canvasHeight); drawGrid(); } ) $(".color_btn").click( function(e){ $(".color_btn").removeClass("color_btn_selected"); $(this).addClass("color_btn_selected"); strokeColor=$(this).css("background-color"); } ) //适用于移动端触控 functionbeginStroke(point){ isMouseDown=true //console.log("mousedown!"); lastLoc=windowToCanvas(point.x,point.y);//上一次坐标位置 lastTimestamp=newDate().getTime(); } functionendStroke(){ isMouseDown=false; } functionmoveStroke(point){ varcurLoc=windowToCanvas(point.x,point.y); varcurTimestamp=newDate().getTime(); vars=calcDistance(curLoc,lastLoc); vart=curTimestamp-lastTimestamp; varlineWidth=calcLineWidth(t,s); //draw context.beginPath(); context.moveTo(lastLoc.x,lastLoc.y); context.lineTo(curLoc.x,curLoc.y); context.strokeStyle=strokeColor; context.lineWidth=lineWidth; context.lineCap="round"; context.lineJoin="round"; context.stroke(); lastLoc=curLoc; lastTimestamp=curTimestamp; lastLineWidth=lineWidth; } canvas.onmousedown=function(e){ e.preventDefault(); beginStroke({x:e.clientX,y:e.clientY}); }; canvas.onmouseup=function(e){ e.preventDefault(); endStroke(); }; canvas.onmouseout=function(e){ e.preventDefault(); endStroke(); }; canvas.onmousemove=function(e){ e.preventDefault(); if(isMouseDown){ moveStroke({x:e.clientX,y:e.clientY}) } }; canvas.addEventListener('touchstart',function(e){ e.preventDefault(); touch=e.touches[0]; beginStroke({x:touch.pageX,y:touch.pageY}) }); canvas.addEventListener('touchmove',function(e){ e.preventDefault(); if(isMouseDown){ touch=e.touches[0]; moveStroke({x:touch.pageX,y:touch.pageY}); } }); canvas.addEventListener('touchend',function(e){ e.preventDefault(); endStroke(); }); varmaxLineWidth=30; varminLineWidth=1; varmaxStrokeV=10; varminStrokeV=0.1; functioncalcLineWidth(t,s){ varv=s/t; varresultLineWidth; if(v<=minStrokeV) resultLineWidth=maxLineWidth; elseif(v>=maxStrokeV) resultLineWidth=minLineWidth; else{ resultLineWidth=maxLineWidth-(v-minStrokeV)/(maxStrokeV-minStrokeV)*(maxLineWidth-minLineWidth); } if(lastLineWidth==-1) returnresultLineWidth; returnresultLineWidth*1/3+lastLineWidth*2/3; } functioncalcDistance(loc1,loc2){ returnMath.sqrt((loc1.x-loc2.x)*(loc1.x-loc2.x)+(loc1.y-loc2.y)*(loc1.y-loc2.y)); } functionwindowToCanvas(x,y){ varbbox=canvas.getBoundingClientRect(); return{x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)} } functiondrawGrid(){ context.save(); context.strokeStyle="rgb(230,11,9)"; context.beginPath(); context.moveTo(3,3); context.lineTo(canvasWidth-3,3); context.lineTo(canvasWidth-3,canvasHeight-3); context.lineTo(3,canvasHeight-3); context.closePath(); context.lineWidth=6; context.stroke(); context.beginPath(); context.moveTo(0,0); context.lineTo(canvasWidth,canvasHeight); context.moveTo(canvasWidth,0); context.lineTo(0,canvasHeight); context.moveTo(canvasWidth/2,0); context.lineTo(canvasWidth/2,canvasHeight); context.moveTo(0,canvasHeight/2); context.lineTo(canvasWidth,canvasHeight/2); context.lineWidth=1; context.stroke(); context.restore(); }

js canvas实现写字动画效果

热门推荐

随机推荐