js canvas实现写字动画效果


Posted in Javascript onNovember 30, 2018

本文实例为大家分享了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();
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
webpack打包多页面的方法
Nov 30 #Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 #Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 #Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 #Javascript
js字符串倒序的实例代码
Nov 30 #Javascript
实例讲解JavaScript截取字符串
Nov 30 #Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 #Javascript
You might like
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
php实现telnet功能示例
2014/04/08 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
DOM 事件流详解
2015/01/20 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
python 输出上个月的月末日期实例
2018/04/11 Python
python中int与str互转方法
2018/07/02 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
交通安全演讲稿
2014/01/07 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
关于人生的感言
2014/01/17 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
给老婆的保证书范文
2014/04/28 职场文书
工程负责人任命书
2014/06/06 职场文书
小学师德师风整改措施
2014/10/27 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
业务员岗位职责范本
2015/04/03 职场文书
服务员岗位职责范本
2015/04/09 职场文书
师范生教育见习总结
2015/06/23 职场文书
运动会加油稿50字
2015/07/21 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
听课评课活动心得体会
2016/01/15 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书