原生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 相关文章推荐
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
Vue实现滑动拼图验证码功能
Sep 15 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的栏目导航程序
2006/10/09 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
php while循环控制的简单实例
2016/05/30 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
Python实现基本线性数据结构
2016/08/22 Python
Python代码实现KNN算法
2017/12/20 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
播音主持女孩的自我评价分享
2013/11/20 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python