js canvas实现写字动画效果

2019-11-19 12:26:36

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js canvas实现写字动画效果展示的具体代码，供大家参考，具体内容如下

页面html：

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>学写一个字</title> <script src="jquery-2.1.3.min.js" type="text/javascript"></script> <link href="handwriting.css" rel="stylesheet" type="text/css"/> <meta name="viewport"   content=" height = device-height,     width = device-width,     initial-scale = 1.0,     minimum-scale = 1.0,     maximum-scale = 1.0,     user-scalable = no"/> //兼容移动端 </head><body>  <canvas id="canvas">  您的浏览器不支持canvas </canvas>//写字区域 <div id="controller">  <div id="black_btn" class="color_btn color_btn_selected"></div>  <div id="blue_btn" class="color_btn"></div>  <div id="green_btn" class="color_btn"></div>  <div id="red_btn" class="color_btn"></div>  <div id="orange_btn" class="color_btn"></div>  <div id="yellow_btn" class="color_btn"></div>   <div id="clear_btn" class="op_btn">清 除</div>  <div class="clearfix"></div> </div>  <script src = "handwriting.js"></script></body></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();}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：微信小程序实现保存图片到相册功能

下一篇：webpack打包多页面的方法