javascript实现画板功能


Posted in Javascript onApril 12, 2020

本文实例为大家分享了javascript实现画板功能的具体代码,供大家参考,具体内容如下

画板功能的实现

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 *{
 margin: 0;
 padding: 0;
 list-style: none;
 }
 
 body{
 background:url(11.jpg) 0 0 no-repeat;
 }
 
 .wrapper{
 margin: 10px;
 }
 
 .wrapper canvas{
 border: 1px solid blue;
 border-radius:25px;
 box-shadow: 10px 10px 5px brown;
 margin-bottom: 16px;
 background-color: #fff;
 
 }
 .wrapper .btn-list{
 width: 1000px;
 text-align: center;
 }
 
 .wrapper .btn-list li{
 display: inline-block;
 margin-left: 40px;
 
 }
 .wrapper .btn-list li input{
 background-color: darkgreen;
 color: blanchedalmond
 border: none;
 padding: 6px 13px;
 cursor: pointer;
 border-radius:25px;
 font-size: 18px;
 display: block;
 transition-duration: 0.2s;
 }
 
 .wrapper .btn-list li input:hover{
 border: 1px solid chocolate;
 box-shadow: 0 12px 15px 0 rgba(0,0,0,0.5);
 }
 </style>
 </head>
 <body>
 <!-- div.wrapper>canvas+ul.btn-list>li*5>input -->
 
 <div class="wrapper"> 
 <canvas class="cavs" width="1000" height="500"></canvas>
 <ul class="btn-list">
 <li><input type="color" id="colorBoard" value="colorBoard"></li>
 <li><input type="button" id="cleanBoard" value="清屏"></li>
 <li><input type="button" id="eraser" value="橡皮"></li>
 <li><input type="button" id="rescind" value="撤销"></li>
 <li><input type="range" id="lineRuler" value="线条" min="1" max="30"></li>
 </ul>
 </div>
 </body>
 
 <script src="jquery-3.4.1.min.js"></script>
 <script>
 var drawingLineObj = {
 cavs:$('.cavs'),
 context:$('.cavs').get(0).getContext('2d'),
 colorBoard:$('#colorBoard'),
 cleanBoard:$('#cleanBoard'),
 arrImg:[],
 eraser:$("#eraser"),
 rescind:$('#rescind'),
 lineRuler:$('#lineRuler'), 
 bool:false,
 init:function(){ 
 this.context.lineCap = 'round'; //线条起始与结尾样式
 this.context.lineJoin = 'round'; //转弯
 this.draw(); //画笔函数
 this.btnFn(); //按钮函数
 },  
 
 draw:function(){ 
 var cavs = this.cavs,
 self = this;
 var c_x = cavs.offset().left, //canvas离左边的距离
 c_y = cavs.offset().top; //canvas离上边的距离
 
 cavs.mousedown(function(e){
 e = e||window.event;
 self.bool = true;
 var m_x = e.pageX - c_x, //鼠标点距离减去canvas离左边的距离等于画布点
  m_y = e.pageY - c_y; //鼠标点距离减去canvas离上边的距离等于画布点
 self.context.beginPath();
  self.context.moveTo(m_x,m_y);//鼠标在画布上的点
 var imgData = self.context.getImageData(0,0,self.cavs[0].width,self.cavs[0].height);
 self.arrImg.push(imgData);
 //console.log(self.arrImg);
 
 })
 cavs.mousemove(function(e){
 if(self.bool){ //定义一把锁,防止鼠标移开滑动
 self.context.lineTo(e.pageX-c_x,e.pageY-c_y);
 self.context.stroke(); //绘制出路径
 }
 
 })
 cavs.mouseup(function(){
  self.context.closePath(); //结束自动闭合
 self.bool = false; //鼠标不移动时画笔断开
 
 })
 cavs.mouseleave(function(){
 self.context.closePath(); //结束自动闭合
 self.bool = false; //鼠标不移动时画笔断开
  
 
 }) 
 
 
 },   
 btnFn:function(){ 
 var self = this;
 $('.btn-list').on('click',function(e){ 
 e = e||window.event;
 switch(e.target.id){ //target
 case 'cleanBoard':
 self.context.clearRect(0,0,self.cavs[0].width,self.cavs[0].height) //[0]
 break
 case 'eraser':
 self.context.strokeStyle = '#fff'
 break
 case 'rescind':
 if(self.arrImg.length>0){
 self.context.putImageData(self.arrImg.pop(),0,0);
 break
 } 
 
 }
 })      
 this.colorBoard.change(function(e){ //当颜色变化时改变字体的颜色
 self.context.strokeStyle = $(this).val();
 })
 
 this.lineRuler.change(function(e){ //线条的变化值
 self.context.lineWidth = $(this).val();
 })
 
 }
 
 }   
 drawingLineObj.init();
 
 </script>
</html>

javascript实现画板功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
JS实现随机点名器
Apr 12 #Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 #Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 #Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 #Javascript
js函数柯里化的方法和作用实例分析
Apr 11 #Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 #Javascript
JavaScript运行机制实例分析
Apr 11 #Javascript
You might like
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
python实现在windows下操作word的方法
2015/04/28 Python
python数据结构之图的实现方法
2015/07/08 Python
我就是这样学习Python中的列表
2019/06/02 Python
pandas取出重复数据的方法
2019/07/04 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Python接收手机短信的代码整理
2020/08/02 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
2014党员自我评议表范文
2014/09/20 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书