用canvas实现写毛笔字功能，根据停留时间改变笔画粗细-JS-网际微蓝论坛

用canvas实现写毛笔字功能，根据停留时间改变笔画粗细

귀하다 하지 않

귀하다 하지 않 2020-8-20 35202

[百度已收录]

[搜狗已收录]

[360已收录]

先上效果图

HTML代码

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

/* #canvas{

background: url(./1.png) no-repeat center center;

background-size: 100% 100%;

} */

/* CSS Document */

#canvas

{

display:block;

margin:0 auto;

border:1px solid #aaa;

}

#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 ;

cursor:pointer;

background:#fff;

font-weight:bold;

font-family: Microsoft Yahei, Arial;

}

.op_btn

{

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;

}

</style>

</head>

<body>

<canvas id="canvas" width="800" height="800">你的浏览器不支持canvas</canvas>

</div>

</div>

</body>

</html>

handwrite.js

// JavaScript Documentvar

//为了手机端的自适应；

var canvasWidth=Math.min(800,$(window).width()-20);

var ResultLineWidth=1;

var canvasHeight=canvasWidth;

//判断是都按下鼠标

var isMouseDown=false;

//记录上一次鼠标所在位置

var lasloc={x:0,y:0};

var lasTimeStamp=0;

var laslinewidth=-1;

var strokeColor="blue";

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

}

)

//使用jQuery对颜色按钮进行操作

$(".color_btn").click(

function(e)

{

$(".color_btn").removeClass("color_btn_selected");

$(this).addClass("color_btn_selected");

strokeColor=$(this).css("background-color");

}

)

function beginStock(point)

{

isMouseDown=true;

//console.log("mousedown");

lasloc=windowToCanvas(point.x,point.y);

lasTimeStamp=new Date().getTime();

}

function endStock(point)

{

isMouseDown=false;

}

function moveStock(point)

{

var curloc=windowToCanvas(point.x,point.y);

var curTimeStamp=new Date().getTime();

var s=calDistangce(curloc,lasloc);

var t=curTimeStamp-lasTimeStamp;

var lineWidth=CalClientWidth(t,s);

//具体的绘制，鼠标按下之后

context.beginPath();

context.moveTo(lasloc.x,lasloc.y);

context.lineTo(curloc.x,curloc.y);

context.strokeStyle=strokeColor;

context.lineWidth=lineWidth;

//设置线条的帽子，是线条平滑

context.lineCap="round";

context.lineJoin="round";

context.stroke();

lasloc=curloc;

lasTimeStamp=curTimeStamp;

laslinewidth=ResultLineWidth;

}

//鼠标按下

canvas.onmousedown=function(e)

{

//阻止默认事件响应

e.preventDefault();

beginStock({x:e.clientX,y:e.clientY});

//当前的canvas画布上的坐标点 alert(loc.x+","+loc.y);

};

//鼠标松开

canvas.onmouseup=function(e)

{

e.preventDefault();

endStock();

//console.log("mouseup");

};

//鼠标移出指定对象时发生

canvas.onmouseout=function(e)

{

e.preventDefault();

endStock();

//console.log("mouseout");

};

//鼠标移动过程中

canvas.onmousemove=function(e)

{

e.preventDefault();

if(isMouseDown)

{

//console.log("mousemove");

moveStock({x:e.clientX,y:e.clientY});

}

};

//移动端（触碰相关的事件）

canvas.addEventListener('touchstart',function(e){

e.preventDefault();

//触碰事件，也可能是多点触碰，就是第一个

touch=e.touches[0];

beginStock({x:touch.pageX,y:touch.pageY});

});

canvas.addEventListener('touchmove',function(e){

e.preventDefault();

if(isMouseDown)

{

//console.log("mousemove");

touch=e.touches[0];

moveStock({x:touch.pageX,y:touch.pageY});

}

});

canvas.addEventListener('touchend',function(e){

e.preventDefault();

endStock();

});

//移动端（触碰相关的事件)结束

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

}

//屏幕坐标点转化为canvas画布坐标 ,定位canvas画布上的坐标

function windowToCanvas(x,y)

{

//包含canvas距离画布的上和左边距

var bbox=canvas.getBoundingClientRect();

return {x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)}

}

//通过两点计算出两点之间距离

function calDistangce(loc1,loc2)

{

return Math.sqrt((loc1.x-loc2.x)*(loc1.x-loc2.x)+(loc1.y-loc2.y)*(loc1.y-loc2.y));

}

//笔画速度越快，笔越细，反之越粗！

var maxlinewidth=30;

var minlinewidth=1;

var maxlinespeed=10;

var minlinespeed=0.1;

function CalClientWidth(t,s)

{

var v=s/t;

var ResultLineWidth;

//处理速度很慢和很快的情况

if(v<=minlinespeed)

ResultLineWidth=maxlinewidth;

else if(v>=maxlinespeed)

ResultLineWidth=minlinewidth;

else

ResultLineWidth=maxlinewidth-(v-minlinespeed)/(maxlinespeed-minlinespeed)*(maxlinewidth-minlinewidth);

if(laslinewidth==-1)

return ResultLineWidth;

return laslinewidth*2/3+ResultLineWidth*1/3;

}

网际微蓝论坛- 版权声明 1、本主题所有言论和图片纯属会员个人意见，与网际微蓝论坛立场无关。
2、本站所有主题由该帖子作者发表，该帖子作者귀하다 하지 않与网际微蓝论坛享有帖子相关版权。
3、网际微蓝论坛管理员和版主有权不事先通知发贴者而删除本文。
4、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者귀하다 하지 않和网际微蓝论坛的同意。

上一篇：js阻止表单提交
下一篇：Vue前端UI组件集合