原生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 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
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简单实现多语言切换的方法
2016/05/09 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
jquery密码强度校验
2015/12/02 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python不规范的日期字符串处理类
2014/06/10 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
关于python 跨域处理方式详解
2020/03/28 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
端口镜像是怎么实现的
2014/03/25 面试题
JSF的标签库有哪些
2012/04/27 面试题
外贸采购员求职的自我评价
2013/11/26 职场文书
八年级英语教学反思
2014/01/09 职场文书
企业挂职心得体会
2014/09/10 职场文书
高中运动会广播稿
2014/09/16 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
土地租赁协议书
2015/01/29 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
在Django中使用MQTT的方法
2021/05/10 Python
MySQL系列之十二 备份与恢复
2021/07/02 MySQL