js canvas实现写字动画效果
程序员文章站
2023-10-22 19:14:59
本文实例为大家分享了js canvas实现写字动画效果展示的具体代码，供大家参考，具体内容如下
页面html：
&...
本文实例为大家分享了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();
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 微信小程序云开发详细教程