本文实例为大家分享了js画布上实现写字动画效果展示的具体代码,供大家参考,具体内容如下
页面html:
& lt; !DOCTYPE html>
& lt; html>
& lt;头lang=癳n”比;
& lt;元charset=皍tf - 8”比;
& lt; title>学写一个字& lt;/title>
& lt;脚本src=" https://www.yisu.com/zixun/jquery-2.1.3.min.js " type=" text/javascript祝辞& lt;/script>
& lt;链接的href=" https://www.yisu.com/zixun/handwriting.css " rel="样式表" type=" text/css "/比;
& lt; meta name=" viewport "
内容="=device-height,高度
宽度=设备宽度,
初始=1.0,
最小刻度=1.0,
最大范围=1.0,
user-scalable=不”/比;//兼容移动端
& lt;/head>
& lt; body>
& lt;帆布id=盎肌北?
您的浏览器不支持画布
& lt;/canvas>//写字区域
& lt; div id=翱刂破鳌北?
& lt; div id=" black_btn " class=" color_btn color_btn_selected”祝辞& lt;/div>
& lt; div id=癰lue_btn”class=癱olor_btn”祝辞& lt;/div>
& lt; div id=癵reen_btn”class=癱olor_btn”祝辞& lt;/div>
& lt; div id=皉ed_btn”class=癱olor_btn”祝辞& lt;/div>
& lt; div id=皁range_btn”class=癱olor_btn”祝辞& lt;/div>
& lt; div id=皔ellow_btn”class=癱olor_btn”祝辞& lt;/div>
& lt; div id=癱lear_btn”class=皁p_btn”在清除& lt;/div>
& lt; div类=" clearfix "祝辞& lt;/div>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/handwriting.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
页面css:
#帆布{
显示:块;
保证金:0汽车;
}
#控制器{
保证金:0汽车;
}
.op_btn {
浮:正确;
保证金:10 px 0 0 10 px;
边界:2 px固体# aaa级;
宽度:80 px;
高度:40像素;
行高:40像素;
字体大小:20 px;
text-align:中心;
border - radius: 5 px 5 px;
光标:指针;
背景颜色:白色;
粗细:大胆的;
Arial字体类型:微软Yahei;
}
.op_btn:{徘徊
background - color: # def;
}
.clearfix {
明确:;
}
.color_btn {
浮:左;
保证金:10 px 10 px 0 0;
边界:5 px固体白色;
宽度:40像素;
高度:40像素;
border - radius: 5 px 5 px;
光标:指针;
}
.color_btn:{徘徊
边界:5 px固体紫色;
}
.color_btn_selected {
边界:5 px固体blueviolet;
}
# black_btn {
背景颜色:黑色;
}
# blue_btn {
背景颜色:蓝色;
}
# green_btn {
背景颜色:绿色;
}
# red_btn {
背景颜色:红色;
}
# orange_btn {
背景颜色:橙色;
}
# yellow_btn {
背景颜色:黄色;
}
之前
页面js:
var canvasWidth=数学。分钟(800美元(窗口).width() - 20);//如果屏幕小于800 px,则取值为屏幕大小宽度,便于移动端的展示,-20是为了使得米字格不紧贴于边缘
var canvasHeight=canvasWidth;
var strokeColor=昂谏?
var isMouseDown=false;//鼠标按下时候的状态
var lastLoc={x: 0 y: 0};//鼠标上一次结束时的位置
var lastTimestamp=0;//上一次时间,与笔刷粗细有关
var lastLineWidth=1;//笔刷粗细
画布var=. getelementbyid(“画布”);
var=canvas.getContext上下文(2 d);
画布。宽度=canvasWidth;
画布。身高=canvasHeight;
$(" #控制器”). css(“宽度”,canvasWidth +“px”);
drawGrid();//画米字格
$ (" # clear_btn”) .click (
函数(e) {
上下文。clearRect (0, 0, canvasWidth canvasHeight);
drawGrid ();
}
）
(“.color_btn”) .click(美元
函数(e) {
$ (" .color_btn ") .removeClass (“color_btn_selected”);
(美元).addClass (“color_btn_selected”);
strokeColor=$ () . css(“背景颜色”);
}
）//适用于移动端触控
函数beginStroke(点){
isMouseDown=true//控制台。日志(“老鼠!”);
lastLoc=windowToCanvas(点。x, point.y);//上一次坐标位置
.getTime lastTimestamp=new日期()();
}
函数endStroke () {
isMouseDown=false;
}
函数moveStroke(点){
var curLoc=windowToCanvas(点。x点。y);
.getTime var curTimestamp=new日期()();
var s=calcDistance (curLoc lastLoc);
var t=curTimestamp - lastTimestamp;
var线宽=calcLineWidth (t, s);//画
context.beginPath ();
上下文。函数(lastLoc。x, lastLoc。y);
上下文。画线(curLoc。x, curLoc。y);
上下文。strokeStyle=strokeColor;
上下文。线宽=线宽;
上下文。lineCap=霸病?
上下文。lineJoin=霸病?
context.stroke ();
lastLoc=curLoc;
lastTimestamp=curTimestamp;
lastLineWidth=线宽;
}
画布。onmousedown=function (e) {
e.preventDefault ();
beginStroke ({x: e。clientX y: e。clientY});
}；
画布。onmouseup=function (e) {
e.preventDefault ();
endStroke ();
}；
画布。onmouseout=function (e) {
e.preventDefault ();
endStroke ();
}；
画布。onmousemove=function (e) {
e.preventDefault ();
如果(isMouseDown) {
moveStroke ({x: e。clientX y: e.clientY})
}
}；
canvas.addEventListener (touchstart,函数(e) {
e.preventDefault ();
触摸=e.touches [0];
beginStroke ({x:联系。pageX y:联系。pageY})
})；
canvas.addEventListener (touchmove,函数(e) {
e.preventDefault ();
如果(isMouseDown) {
触摸=e.touches [0];
moveStroke ({x:联系。pageX y: touch.pageY});
}
})；
canvas.addEventListener (touchend,函数(e) {
e.preventDefault ();
endStroke ();
})；
var maxLineWidth=30;
var minLineWidth=1;
var maxStrokeV=10;
var minStrokeV=0.1;
函数calcLineWidth (t, s) {
var v=s/t;
var resultLineWidth;
如果(v & lt;=minStrokeV)
resultLineWidth=maxLineWidth;
else if (v祝辞=maxStrokeV)
resultLineWidth=minLineWidth;
其他{
resultLineWidth=maxLineWidth - (v-minStrokeV)/(maxStrokeV-minStrokeV) * (maxLineWidth-minLineWidth);
}
如果(lastLineWidth==1)
返回resultLineWidth;
返回resultLineWidth * 1/3 + lastLineWidth * 2/3;
}
函数calcDistance (loc1 loc2) {
返回数学。√(loc1。x - loc2.x) * (loc1。null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
