微客导航 » 文章资讯 » js+canvas实现画板功能

js+canvas实现画板功能

2023-07-16 19:25:03 102

本文实例为大家分享了js+canvas实现画板功能的具体代码，供大家参考，具体内容如下

1.实现了画图，改变画笔粗细，改变画笔颜色，清屏功能





画板






画笔颜色:

画笔粗细:

清屏

*{
margin:0;
padding:0;
text-align:left;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
}
#mycanvas{
border:2pxsoliddeepskyblue;
}
.tool{
width:260px;
height:100%;
position:fixed;
right:0;
top:0;
background-color:#CCCCCC;
}

//获取对象
varmycanvas=document.getElementById("mycanvas");
varcolor1=document.getElementById("color1");
varrange1=document.getElementById("range1");
varbtn=document.getElementsByClassName("btn")[0];
varcontxt=mycanvas.getContext("2d");
btn.onclick=function(){
contxt.clearRect(0,0,1200,660);
}
varflag=false;
varx=0,
y=0;
//鼠标点下事件
mycanvas.onmousedown=function(event){
flag=true;
//获取鼠标点下的开始位置
varx=event.clientX-mycanvas.offsetLeft;
vary=event.clientY-mycanvas.offsetTop;
contxt.beginPath();//开始新建路径
contxt.strokeStyle=color1.value;//获得颜色赋值给画笔
contxt.lineCap="round";
contxt.lineWidth=range1.value;//获得画笔宽度赋值给画笔
contxt.moveTo(x,y);//开始位置
}
//鼠标移动事件
mycanvas.onmousemove=function(event){
//获取鼠标在移动的位置
varmX=event.clientX-mycanvas.offsetLeft;
varmY=event.clientY-mycanvas.offsetTop;
if(flag){
contxt.lineTo(mX,mY);//移动途中和结束位置
contxt.stroke();//结束渲染画布
}
}
//鼠标松开事件
mycanvas.onmouseup=function(){
flag=false;
}

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

js+canvas实现画板功能

热门推荐

随机推荐