原生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 相关文章推荐
js 目录列举函数
Nov 06 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
详谈js模块化规范
Jul 07 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
JavaScript中跨域问题的深入理解
Mar 04 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
动易数据转成dedecms的php程序
2007/04/07 PHP
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
一个JS翻页效果
2007/07/23 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
全球性的在线购物网站:Zapals
2017/03/22 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
Android interview questions
2016/12/25 面试题
售后服务承诺书模板
2014/05/21 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
公司人力资源管理制度
2015/08/05 职场文书
医院病假条范文
2015/08/17 职场文书
入党申请书怎么写?
2019/06/11 职场文书