原生JS+HTML5实现的可调节写字板功能示例


Posted in Javascript onAugust 30, 2018

本文实例讲述了原生JS+HTML5实现的可调节写字板功能。分享给大家供大家参考,具体如下:

前面一篇介绍了《JS+HTML5 Canvas实现简单的写字板功能》,这里再介绍另一种实现方法。首先来看看运行效果:

原生JS+HTML5实现的可调节写字板功能示例

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3water.com JS写字板</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" onclick="changecolor('red'),ss(this)"></li>
<li class="all" id="yellow" onclick="changecolor('yellow'),ss(this)"></li>
<li class="all" id="black" onclick="changecolor('black'),ss(this)"></li>
<li class="all" id="green" onclick="changecolor('green'),ss(this)"></li>
<li class="all" id="blue" onclick="changecolor('blue'),ss(this)"></li>
</ul></br>
<input id="clear" type="button" value="重画"> <!--<onclick="clears()">-->
</br></br>
<div id="fontW">
<strong>线条粗细:</strong>0<input type="range" id="ranges" min="0" max="20" onchange="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.onmousemove=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.onmousedown=function(e){
  var e=e||event;
  e.preventDefault();
  lastmousePos=curmousePos
  down=true;
 }
 //鼠标松开事件
 cans.onmouseup=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].onmouseover=function(){
     this.style.cssText="margin-top:-6px;box-shadow:3px 5px 5px black"
     }
     all[i].onmouseout=function(){
     this.style.cssText="border: 1px solid #CCCCCC;"
     }
     }
     }
     changeBg()
     //恢复原状
      function ss(s){
     s.style.cssText="margin-top:0px;box-shadow:none;"
      }
     //清除方法
     clear.onmousedown=function (){
      cts.clearRect(0,0,cans.width,cans.height);
//     clears1=true;
     }
     //清除后重画
     clear.onmouseup=function(){
      drawcanvs();
     }
</script>
</body>
</html>

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,亲身体验一下运行效果。

更多关于JavaScript相关内容还可查看本站专题:《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
checkbox使用示例
Aug 23 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 #Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 #jQuery
jsonp跨域及实现百度首页联想功能的方法
Aug 30 #Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 #Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 #Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 #Javascript
详解React native fetch遇到的坑
Aug 30 #Javascript
You might like
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
php 小乘法表实现代码
2009/07/16 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
js传值 判断
2006/10/26 Javascript
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
python常用函数与用法示例
2019/07/02 Python
Django中FilePathField字段的用法
2020/05/21 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
大学生预备党员自我评价分享
2013/11/16 职场文书
仓库文员岗位职责
2014/04/06 职场文书
地球一小时倡议书
2014/04/15 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
2014年社区工作总结
2014/11/18 职场文书
家长给老师的感谢信
2015/01/20 职场文书
Python包argparse模块常用方法
2021/06/04 Python
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python