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 相关文章推荐
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
js blob类型url的视频下载问题的解决
Nov 29 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
mysql+php分页类(已测)
2008/03/31 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
php设计模式小结
2013/02/15 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
jquery ajax post提交数据乱码
2013/11/05 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
详解python 发送邮件实例代码
2016/12/22 Python
Tornado 多进程实现分析详解
2018/01/12 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
python实现人像动漫化的示例代码
2020/05/17 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
素食餐饮项目创业计划书
2014/02/02 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技