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

页面html：

学写一个字

content=" height = device-height,

width = device-width,

initial-scale = 1.0,

minimum-scale = 1.0,

maximum-scale = 1.0,

user-scalable = no"/> //兼容移动端

您的浏览器不支持canvas

//写字区域

页面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();

}

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