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的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
Javascript的表单验证长度
Mar 16 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
php 购物车完整实现代码
2014/06/05 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
php中stdClass的用法分析
2015/02/27 PHP
jquery 插件学习(五)
2012/08/06 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
jquery实现广告上下滚动效果
2021/03/04 jQuery
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Python实现队列的方法
2015/05/26 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
大学生作弊检讨书
2014/02/19 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
运动会致辞稿
2015/07/29 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏