原生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之对系统的toFixed()方法的修正
May 08 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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
DOMXML函数笔记
2006/10/09 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
学习面向对象之面向对象的术语
2010/11/30 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
python通过post提交数据的方法
2015/05/06 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
C语言面试题
2015/10/30 面试题
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
如何进行Linux分区优化
2013/02/12 面试题
自考生自我鉴定范文
2013/10/01 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电