怎么在JavaScript中使用canvas实现一个画板和签字板功能

tangjin

作者

怎么在JavaScript中使用canvas实现一个画板和签字板功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvasid="canvas"></canvas>
<script>
letc=document.getElementById('canvas');
c.width=window.innerWidth;
c.height=window.innerHeight;
letctx=c.getContext('2d');

//drawoneblackboard
ctx.fillStyle="black";
ctx.fillRect(0,0,600,300);

//按下标记
letonoff=false,
oldx=-10,
oldy=-10;

//设置颜色
letlinecolor="white";

//设置线宽
letlinw=4;

//添加鼠标事件
//按下
c.addEventListener('mousedown',event=>{
onoff=true;
//位置-10是为了矫正位置，把绘图放在鼠标指针的顶端
oldx=event.pageX-10;
oldy=event.pageY-10;
},false);
//移动
c.addEventListener('mousemove',event=>{
if(onoff==true){
letnewx=event.pageX-10,
newy=event.pageY-10;

//绘图
ctx.beginPath();
ctx.moveTo(oldx,oldy);
ctx.lineTo(newx,newy);
ctx.strokeStyle=linecolor;
ctx.lineWidth=linw;
ctx.lineCap="round";
ctx.stroke();
//每次移动都要更新坐标位置
oldx=newx,
oldy=newy;
}
},true);
//弹起
c.addEventListener('mouseup',()=>{
onoff=false;
},false);
</script>
</body>
</html>

结果展示

代码讲解

思路

1、鼠标按下，开始描画。鼠标按下事件。2、鼠标弹起，结束描画。鼠标弹起事件。3、鼠标按下移动，路径画线。鼠标移动事件。

代码讲解

整体思路：按下鼠标，触发移动的开关，移动后开始记录线条（用移动后的坐标-移动前的坐标，然后绘线），每次移动都会更新旧坐标。松开鼠标后，释放移动开关。

1、只有在鼠标按下，才会触发移动绘图的效果，所以需要增加一个状态判断。2、因为鼠标指针和实际位置有一个偏移量，所以在坐标定位的时候，需要增加pagex-10从而使坐标位于指针的尖端处。3、每次移动都要更新坐标位置，用小段的线段来模拟不规则的线。

封装模块

<canvasid="canvas"></canvas>
<script>
classBoard{
constructor(canvasName='canvas',data=newMap([
["onoff",false],
["oldx",-10],
["oldy",-10],
["fillStyle","black"],
["lineColor","white"],
["lineWidth",4],
["lineCap","round"],
["canvasWidth",window.innerWidth],
["canvasHeight",window.innerHeight]
])){
//this.data=data;
this.c=document.getElementById(canvasName);
this.ctx=this.c.getContext('2d');
this.onoff=data.get("onoff");
this.oldx=data.get("oldx");
this.oldy=data.get("oldy");
this.lineColor=data.get("lineColor");
this.lineWidth=data.get("lineWidth");
this.lineCap=data.get("lineCap");

this.c.width=data.get("canvasWidth");
this.c.height=data.get("canvasHeight");

this.ctx.fillStyle=data.get("fillStyle");
this.ctx.fillRect(0,0,600,300);
}

eventOperation(){
//添加鼠标事件
//按下
this.c.addEventListener('mousedown',event=>{
this.onoff=true;
//位置-10是为了矫正位置，把绘图放在鼠标指针的顶端
this.oldx=event.pageX-10;
this.oldy=event.pageY-10;
},false);
//移动
this.c.addEventListener('mousemove',event=>{
if(this.onoff==true){
letnewx=event.pageX-10,
newy=event.pageY-10;

//绘图
this.ctx.beginPath();
this.ctx.moveTo(this.oldx,this.oldy);
this.ctx.lineTo(newx,newy);

this.ctx.strokeStyle=this.lineColor;
this.ctx.lineWidth=this.lineWidth;
this.ctx.lineCap=this.lineCap;

this.ctx.stroke();
//每次移动都要更新坐标位置
this.oldx=newx,
this.oldy=newy;
}
},true);
//弹起
this.c.addEventListener('mouseup',()=>{
this.onoff=false;
},false);
}

}

letboard=newBoard();
board.eventOperation();
</script>

关于怎么在JavaScript中使用canvas实现一个画板和签字板功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。

阅读全文

发布于 2021-02-24 07:35:55

javascript