JS实现canvas简单小画板功能


Posted in Javascript onJune 23, 2020

本文实例为大家分享了JS实现canvas简单小画板的具体代码,供大家参考,具体内容如下

JS实现canvas简单小画板功能

Html部分:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./index.css" rel="external nofollow" >
  <title>Document</title>
</head>
<body>
  <div class="container">
    <canvas id="cavs" width="700" height="330"></canvas>
    <ul>
      <li> <input type="color" id="color"> </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="button" id="save" value=保存></li>
      <li><input type="range" id="lineRuler" min="1" max="20"> </li>
    </ul>
  </div>
  <script src="./index.js"></script>
</body>
</html>

CSS部分:

*{
  margin: 0;
  padding: 0;
  list-style: none;
}
.container{
  margin: 30px;
}
#cavs{
  border: 1px solid red;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}
.container ul{
  margin-top: 20px;
  width: 700px;
  text-align: center;
}
.container ul li{
  display: inline-block;
  margin-left: 35px;
}
.container ul li input{
  padding: 6px 15px;
  border-radius: 10px;
  border: none;
  outline: none;
  cursor: pointer;
  transition: box-shadow 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.container ul li input:hover{
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

JS部分:

var drawingBoard = {
  cavs: document.getElementById('cavs'),
  ctx: document.getElementById('cavs').getContext('2d'),
  ul_node: document.getElementsByTagName('ul')[0],
  colorBoard: document.getElementById('color'),
  lineRuler: document.getElementById('lineRuler'),
  imgArr: [],//存放图片
  init: function () {
    this.ctx.lineCap = 'round';
    this.ctx.lineJoin = 'round';
    this.drawing();//开始画画
    this.btnsFnAll();
  },
  drawing: function () {
    var self = this;
    var left = this.cavs.offsetLeft;
    this.cavs.onmousedown = function (e) {
      var e_x = e.pageX;//鼠标在画布上的x点
      var e_y = e.pageY;
      self.ctx.beginPath();//开始绘制
      self.ctx.moveTo(e_x - left, e_y - left);//落笔点,开始点
      var imgData = self.ctx.getImageData(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight);
      self.imgArr.push(imgData)
      document.onmousemove = function (e) {
        self.ctx.lineTo(e.pageX - left, e.pageY - left);//落笔点,开始点
        self.ctx.stroke();
      }
      document.onmouseup = function () {
        document.onmousemove = null;
        self.ctx.closePath();//闭合当前的路径 结束绘制
      }
      this.onpointerleave = function () {
        document.onmousemove = null;
      }
    }
  },
  btnsFnAll: function () {
    var self = this;
    this.ul_node.addEventListener('click', function (e) {
      console.log(e.target.id);
      switch (e.target.id) {
        case 'cleanBoard'://清屏
          self.ctx.clearRect(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight)
          break;
        case 'eraser'://橡皮
          self.ctx.strokeStyle = "#ffffff";
          break;
        case 'save'://保存
          let url = self.cavs.toDataURL('image/jpg');
          let a = document.createElement('a');
          document.body.appendChild(a);
          a.href = url;
          a.download = '草稿纸';
          a.target = '_blank';
          a.click()
          break;
        case 'rescind'://撤销
          console.log(self.imgArr)
          if (self.imgArr.length > 0) {
            self.ctx.putImageData(self.imgArr.pop(), 0, 0)
          }
          break;
      }
    });
    this.colorBoard.onchange = function () {
      self.ctx.strokeStyle = this.value;
    };
    this.lineRuler.onchange = function () {
      self.ctx.lineWidth = this.value
    }
  }
}
drawingBoard.init();

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

Javascript 相关文章推荐
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
jquery easyui使用心得
Jul 07 Javascript
javascript数据类型验证方法
Dec 31 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
javascript+Canvas实现画板功能
Jun 23 #Javascript
vue.js实现照片放大功能
Jun 23 #Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 #Javascript
vue.js实现双击放大预览功能
Jun 23 #Javascript
vue实现分页的三种效果
Jun 23 #Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 #Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 #Javascript
You might like
GD输出汉字的函数的分析
2006/10/09 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
js实现身份证号码验证的简单实例
2014/02/19 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python的Flask框架中web表单的教程
2015/04/20 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
python属于哪种语言
2020/08/16 Python
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
评析教师个人的自我评价
2014/02/19 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
电影建国大业观后感
2015/06/01 职场文书
工程进度款催款函
2015/06/24 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
2016年母亲节寄语
2015/12/04 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
使用javascript解析二维码的三种方式
2021/11/11 Javascript