jscanvas实现写字动画效果
本文实例为大家分享了js canvas实现写字动画效果展示的具体代码,供大家参考,具体内容如下
成都创新互联主营郧西网站建设的网络公司,主营网站建设方案,成都app软件开发公司,郧西h5成都微信小程序搭建,郧西网站营销推广欢迎郧西等地区企业咨询
页面html:
学写一个字 //兼容移动端 //写字区域清 除
页面css:
#canvas{ display:block; margin:0 auto; } #controller{ margin:0 auto; } .op_btn{ float: right; margin:10px 0 0 10px; border:2px solid #aaa; width:80px; height:40px; line-height:40px; font-size:20px; text-align:center; border-radius: 5px 5px; cursor:pointer; background-color: white; font-weight:bold; font-family: Microsoft Yahei, Arial; } .op_btn:hover{ background-color:#def; } .clearfix{ clear:both; } .color_btn{ float: left; margin: 10px 10px 0 0; border:5px solid white; width:40px; height:40px; border-radius: 5px 5px; cursor:pointer; } .color_btn:hover{ border: 5px solid violet; } .color_btn_selected{ border: 5px solid blueviolet; } #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; }
页面js:
var canvasWidth = Math.min( 800 , $(window).width() - 20 );//如果屏幕小于800px,则取值为屏幕大小宽度,便于移动端的展示,-20是为了使得米字格不紧贴于边缘 var canvasHeight = canvasWidth; var strokeColor = "black"; var isMouseDown = false; //鼠标按下时候的状态 var lastLoc = {x:0,y:0}; //鼠标上一次结束时的位置 var lastTimestamp = 0; //上一次时间,与笔刷粗细有关 var lastLineWidth = -1; //笔刷粗细 var canvas = document.getElementById("canvas"); var context = 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"); } ) //适用于移动端触控 function beginStroke(point){ isMouseDown = true //console.log("mouse down!"); lastLoc = windowToCanvas(point.x, point.y); //上一次坐标位置 lastTimestamp = new Date().getTime(); } function endStroke(){ isMouseDown = false; } function moveStroke(point){ var curLoc = windowToCanvas( point.x , point.y ); var curTimestamp = new Date().getTime(); var s = calcDistance( curLoc , lastLoc ); var t = curTimestamp - lastTimestamp; var lineWidth = 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(); }); var maxLineWidth = 30; var minLineWidth = 1; var maxStrokeV = 10; var minStrokeV = 0.1; function calcLineWidth( t , s ){ var v = s / t; var resultLineWidth; if( v <= minStrokeV ) resultLineWidth = maxLineWidth; else if ( v >= maxStrokeV ) resultLineWidth = minLineWidth; else{ resultLineWidth = maxLineWidth - (v-minStrokeV)/(maxStrokeV-minStrokeV)*(maxLineWidth-minLineWidth); } if( lastLineWidth == -1 ) return resultLineWidth; return resultLineWidth*1/3 + lastLineWidth*2/3; } function calcDistance( loc1 , loc2 ){ return Math.sqrt( (loc1.x - loc2.x)*(loc1.x - loc2.x) + (loc1.y - loc2.y)*(loc1.y - loc2.y) ); } function windowToCanvas( x , y ){ var bbox = canvas.getBoundingClientRect(); return {x:Math.round(x-bbox.left) , y:Math.round(y-bbox.top)} } function drawGrid(){ 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(); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
新闻标题:jscanvas实现写字动画效果
URL链接:http://cdiso.cn/article/gdeeis.html