原生js制作写字板

最新推荐文章于 2022-12-07 14:52:48 发布
最新推荐文章于 2022-12-07 14:52:48 发布
阅读量1.4k 收藏
点赞数
文章标签： 原生js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41421227/article/details/79661901
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#cans{
display: block;
margin: 0 auto;

}
#selectColor{
 margin: 0 auto;
     width: 400px;
/* height: 50px;*/
 text-align: center;
 margin-top: 10px;
 list-style: none;
}
.all{
/*width: 10%;
height: 95%;*/
width: 60px;
height: 50px;
border: 1px solid #CCCCCC;
float: left;
margin-left: 10px;
border-radius:6px ;
cursor: pointer;

}
#red{
background-color: red;
}
#yellow{
background: yellow;
}
#black{
background: black;
}
#green{
background: green;
}
#blue{
background: #0000FF;
}
#clear{
margin-left: 10px;
}
#fontW{
width: 400px;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="cans">
您的浏览器不支持该功能！
</canvas>
<ul id="selectColor">
<li class="all" id="red" οnclick="changecolor('red'),ss(this)"></li>
<li class="all" id="yellow" οnclick="changecolor('yellow'),ss(this)"></li>
<li class="all" id="black" οnclick="changecolor('black'),ss(this)"></li>
<li class="all" id="green" οnclick="changecolor('green'),ss(this)"></li>
<li class="all" id="blue" οnclick="changecolor('blue'),ss(this)"></li>
</ul></br>
<input id="clear" type="button" value="重画"> <!--<οnclick="clears()">-->
</br></br>
<div id="fontW">
<strong>线条粗细：</strong>0<input type="range" id="ranges" min="0" max="20" οnchange="changeW()" value="3"/>20
</div>

<script type="text/javascript">
//初始化区
var ranges=document.getElementById("ranges");
var cans=document.getElementById("cans");
var clear=document.getElementById("clear");
cans.width=600;
cans.height=600;
var down=false;
var up=false;
var clears1=false;
var lastmousePos={x:0,y:0};
var curmousePos={x:0,y:0};
var lastWidth;
var curWidth=3;
//设置canvas宽高
var CanvasWidth=cans.width;
var CanvasHeight=cans.height;
var half_width=CanvasWidth/2;
var half_height=CanvasHeight/2;
var frameW=10;

var lineW=1;
//改变线条宽度
function changeW(){
curWidth=ranges.value;
}

var drawCol="black";
//改变字体颜色
function changecolor(s){
                drawCol=s;
           }
var cts=cans.getContext("2d");
//设置米字格子
//开始绘制前设置基本样式
drawcanvs()
function drawcanvs(){
cts.lineCap="round"
cts.lineJoin="round"
cts.lineWidth=frameW;
cts.strokeStyle="red"
cts.beginPath()
 cts.moveTo(0,0);
 cts.lineTo(CanvasWidth,0);
 cts.lineTo(CanvasWidth,CanvasHeight);
 cts.lineTo(0,CanvasHeight);
cts.closePath()
cts.stroke()

//画x
cts.lineWidth=lineW;
cts.beginPath()
cts.moveTo(0,0);
cts.lineTo(CanvasWidth,CanvasHeight);
cts.closePath()
cts.stroke()


cts.beginPath()
cts.moveTo(CanvasWidth,0);
cts.lineTo(0,CanvasHeight);
cts.closePath()
cts.stroke()


cts.beginPath()
cts.moveTo(half_width,0);
cts.lineTo(half_width,CanvasHeight);
cts.closePath()
cts.stroke()

cts.beginPath()
cts.moveTo(0,half_height);
cts.lineTo(CanvasWidth,half_height);
cts.closePath()
cts.stroke()
}
 cans.οnmοusemοve=function(e){
   var e=e||event;
   var clx=e.clientX-cans.getBoundingClientRect().left;//将鼠标原点化为画布原点
   var cly=e.clientY-cans.getBoundingClientRect().top;
   curmousePos={x:clx,y:cly};
   if(down){
    //开始画
    //设置画笔颜色、粗细等
    cts.lineCap="round"
    cts.lineJoin="round"
    cts.lineWidth=curWidth;
    cts.strokeStyle=drawCol;
    //开始绘画
    cts.save();
    cts.beginPath();
      cts.moveTo(lastmousePos.x,lastmousePos.y);
      cts.lineTo(curmousePos.x,curmousePos.y);
    cts.closePath();
    cts.stroke();
    cts.restore();
    lastmousePos=curmousePos;
   }
   if(up){
    down=false;
    up=false;
   }
   
 }
 //鼠标按下事件
 cans.οnmοusedοwn=function(e){
    var e=e||event;
    e.preventDefault();    
    lastmousePos=curmousePos
    down=true;
 }
  //鼠标松开事件
 cans.οnmοuseup=function(e){
    var e=e||event;
    e.preventDefault();
    up=true;
 }
 
 //计算速度
//  function calV(s,t){
//     var v=s/t;
//     if(v<0.1){
//      curWidth=10;
//     }else if(v>10){
//      curWidth=2;
//     }else{
//      curWidth=5
//     }
//  }
          function changeBg(){
          var all=document.getElementsByClassName("all");
          for(var i=0;i<all.length;i++){
          all[i].οnmοuseοver=function(){
          this.style.cssText="margin-top:-6px;box-shadow:3px 5px 5px black"
          }
          all[i].οnmοuseοut=function(){
          this.style.cssText="border: 1px solid #CCCCCC;"
          }
           
          }
          }
          changeBg()
          //恢复原状
           function ss(s){            
          s.style.cssText="margin-top:0px;box-shadow:none;"                  
           }
          //清除方法
         clear.οnmοusedοwn=function (){          
           cts.clearRect(0,0,cans.width,cans.height);
//          clears1=true;
          }
          //清除后重画
          clear.οnmοuseup=function(){
           drawcanvs();
          }
</script>
</body>
</html>
朝着大前端冲鸭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
非常简单的手写板JS
02-16
手写板JS，多用在一些需要手写签字或者签署意见的系统中，该JS，只需要按照压缩文件里面的列子，当用鼠标写一些文字的时候，会生成一段字母代码，将这些代码存入数据库中，打开的时候，从数据库中将这些代码读出来，根据相应的格式就可以将手写的东西显示到网页中
原生js输出html5,原生JS+HTML5实现的可调节写字板功能示例
weixin_29816241的博客
05-30 156
本文实例讲述了原生JS+HTML5实现的可调节写字板功能。分享给大家供大家参考，具体如下：前面一篇介绍了《JS+HTML5 Canvas实现简单的写字板功能》，这里再介绍另一种实现方法。首先来看看运行效果：具体代码如下：www.jb51.net JS写字板#cans{display: block;margin: 0 auto;}#selectColor{margin: 0 auto;width: ...
js画布--手写板
weixin_59558739的博客
10-08 387
body内容 <div> 选择画笔粗细： <select name="" id=""> <option >1px</option> <option >3px</option> <option >5px</option> </select> 选择画笔颜色： <input type="c
JS实现的手写输入
02-01
　 1.不需要任何硬件支持。 　　2.全屏书写。 　　3.语音读字毛笔签名功能 　　4.简繁英数标点任意书写。
php写字板代码,JS+HTML5 Canvas实现简单的写字板功能示例
weixin_39768083的博客
03-23 175
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能。分享给大家供大家参考，具体如下：先来看运行效果：具体代码如下：www.jb51.net JS写字板body,html {padding: 0;margin: 0;}a,div,span {font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;}.canvas-box ...
原生JavaScript制作微博发布面板效果
11-23
javaScript实现微博发布面板效果.采用的js知识有： 正则表达式区分中英文字节、随机数生成等函数 淡入淡出、缓冲运动。闪动等动画函数 onfocus、onblur、oninput、onpropertychange等事件 动态添加元素，获取...
原生js制作的canvas画板
06-01
总结起来，这个原生js制作的canvas画板项目展示了如何使用JavaScript和HTML5的Canvas API创建一个互动式的绘画工具，同时考虑到了移动端的兼容性，让用户无论在桌面还是移动设备上都能享受绘画的乐趣。这个项目对于...
原生JavaScript制作计算器
10-21
本文给大家汇总了2个原生JavaScript实现的计算器功能的代码，一个简单一个稍微复杂些，小伙伴们根据自己的需要来选择吧
原生JS实现留言板
10-15
主要为大家详细介绍了原生JS实现留言板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS+HTML5实现的可调节写字板功能示例
10-18
主要介绍了原生JS+HTML5实现的可调节写字板功能,涉及javascript结合HTML5属性动态操作页面元素实现绘图功能相关技巧,需要的朋友可以参考下
JS+HTML5 Canvas实现简单的写字板功能示例
10-18
主要介绍了JS+HTML5 Canvas实现简单的写字板功能,结合实例形式分析了js结合HTML5 canvas特性的图形绘制相关操作技巧,需要的朋友可以参考下
js canvas实现写字动画效果
10-17
主要为大家详细介绍了js canvas实现写字动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
米字格签名插件.zip
02-03
这个是签名米字格插件
用鼠标在网页中写字-JS特效
06-07
网页中用鼠标写字，效果不错。是用js写的。
百度手写板代码JavaScript远程调用的实现(鼠标输入法)
10-28
百度手写板代码JavaScript远程调用的实现，其实没什么可参考的，引用百度的Js文件，如果大家想使用这个类的话，自己下载就行了，正好可参考一下本演示，帮你快速入题。
基于 canvas 的手写板 js 封装
mengtoumingren的博客
02-26 378
代码封装基于https://blog.csdn.net/javabaidu/article/details/84600901 进行了类封装，并且调整了笔尖的位置 (function (window) { function WriteBoard(container) { this.canvas = {}; this.board = {}; this.mousePress = false; this.la..
js实现的在线绘图板，写字板
kongzhonghu的专栏
12-07 1764
js实现的在线绘图板，写字板
web前端 原生js签名板(电子签名)写字板 canvas 截图
热门推荐
狼丶宇先森的网络科技空间
08-20 1万+
移动端在开发的时候，可能会涉及到手写签名(电子签名)那些，在前端的思路是使用canvas 来签名，导出成图片进行保存。 仅供参考和学习。 vue版本:https://blog.csdn.net/qq_33270001/article/details/102855964 注意:在移动端使用的时候, 写竖的时候, 页面会被往下拉, 手写板动了, 写字不顺畅. 建议在移动端的touchmove事...
JS签字板（基于canvas）
落下香樟树
10-22 726
Canvas签字画图板 需求： 需要开发一个移动端的手写板，要求是类似于签字版，于是就想到了使用canvas着手做一个满足业务需求。 **注：**本次实现的canvas签字版主要用于手机端网页，若用于PC端网页请自行对事件函数以及相应代码做对应的修改。 效果图： 实现代码： * { margin: 0; padding: 0; } html { overflow: hidden; overflow-y: auto; } #app { width: 100vw;
原生js复制到剪切板
最新发布
05-28
你可以使用以下代码将文本复制到剪贴板中： ```javascript // 创建一个临时的textarea元素 let textarea = document.createElement('textarea'); // 设置textarea的值为要复制的文本 textarea.value = '要复制的文本'; // 将textarea元素添加到html文档中 document.body.appendChild(textarea); // 选中textarea中的文本 textarea.select(); // 复制选中的文本到剪贴板中 document.execCommand('copy'); // 移除临时的textarea元素 document.body.removeChild(textarea); ``` 注意：该方法需要用户进行手动操作，即在页面中点击按钮等事件触发该代码执行。在某些浏览器中，该方法需要用户进行授权才能正常执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值