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 相关文章推荐
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
PHPMailer 中文使用说明小结
2010/01/22 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
django框架自定义用户表操作示例
2018/08/07 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
运行Python编写的程序方法实例
2020/10/21 Python
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
几道数据库的概念性面试题
2014/05/30 面试题
文员个人求职自荐信
2013/09/21 职场文书
经贸日语毕业生自荐信
2013/11/03 职场文书
骨干教师培训制度
2014/01/13 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
房产遗嘱范本
2015/08/06 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
Python Django模型详解
2021/10/05 Python