介绍 window.onload =,()函数,{
,,,new lineCanvas ({
,,,,,,,el:, . getelementbyid (“canvas")//绘制画布的父级div
,,,,,,,clearEl:, . getelementbyid (“clearCanvas")//清除按钮
,,,,,,,saveEl:, . getelementbyid (“saveCanvas")//保存按钮
,,,,,,,//,,,,,,线宽:1//线条粗,细选填
,,,,,,,//,,,,,,颜色:“black",//线条颜色,选填
,,,,,,,//,,,,,,背景:“# ffffff"//线条背景,选填
,,,});
};
function lineCanvas (obj), {
,,,this.linewidth =, 1;
,,,this.color =,“# 000000“;
,,,this.background =,“# ffffff";
,,,for (var 小姐:obj拷贝),{
,,,,,,,这[我],=,obj[我];
,,,};
,,,this.canvas =, document.createElement (“canvas");
,,,this.el.appendChild (this.canvas);
,,,this.cxt =, this.canvas.getContext (“2 d");
,,,this.canvas.width =, this.el.clientWidth;
,,,this.canvas.height =, this.el.clientHeight;
,,,this.cxt.fillStyle =, this.background;
,,,this.cxt.fillRect (0, 0, this.canvas.width,, this.canvas.width);
,,,this.cxt.strokeStyle =, this.color;
,,,this.cxt.lineWidth =, this.linewidth;
,,,this.cxt.lineCap =,“round";
,,,//开始绘制
,,,this.canvas.addEventListener (“touchstart",,函数(e), {
,,,,,,,this.cxt.beginPath ();
,,,,,,,this.cxt.moveTo (e.changedTouches [0] .pageX,, e.changedTouches [0] .pageY);
,,,}.bind(这个),假);
,,,//绘制中
,,,this.canvas.addEventListener (“touchmove",,函数(e), {
,,,,,,,this.cxt.lineTo (e.changedTouches [0] .pageX,, e.changedTouches [0] .pageY);
,,,,,,,this.cxt.stroke ();
,,,}.bind(这个),假);
,,,//结束绘制
,,,this.canvas.addEventListener (“touchend",,()函数,{
,,,,,,,this.cxt.closePath ();
,,,}.bind(这个),假);
,,,//清除画布
,,,this.clearEl.addEventListener (“click",,()函数,{
,,,,,,,this.cxt.clearRect (0, 0, this.canvas.width,, this.canvas.height);
,,,}.bind(这个),假);
,,,//保存图片,直接转base64
,,,this.saveEl.addEventListener (“click",,()函数,{
,,,,,,,var imgBase64 =, this.canvas.toDataURL ();
,,,,,,,console.log (imgBase64);
,,,}.bind(这个),假);
};
怎么在html5中使用帆布手写签名?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
这是效果图:
& lt; div id=癱anvas"比;
,,,& lt; p id=癱learCanvas"在清除& lt;/p>
,,,& lt; p id=皊aveCanvas"在保存& lt;/p>
& lt;/div>
html,身体{
,,,宽度:,100%;
,,,身高:,100%;
}
#帆布{
,,,宽度:,100%;
,,,身高:,100%;
,,,位置:,相对;
}
# canvas 帆布{
,,,显示:,块;
}
# clearCanvas {
,,,宽度:,50%;
,,,身高:,40像素;
,,,行高:,40像素;
,,,text-align:,中心;
,,,位置:,绝对;
,,,底部:,0;
,,,左:,0;
边境:,,,,1 px solid # DEDEDE;
,,,z - index:, 1;
}
# saveCanvas {
,,,宽度:,50%;
,,,身高:,40像素;
,,,行高:,40像素;
null
null
null
null
null
null
null
