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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
js读取本地文件的实例
Dec 22 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
es6中let和const的使用方法详解
Feb 24 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php 文本文件的读取效率
2012/02/10 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
php中错误处理操作实例分析
2019/08/23 PHP
javascript 写类方式之二
2009/07/05 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
详解flask表单提交的两种方式
2018/07/21 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
自我评价中英文语句
2013/11/30 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
差生评语大全
2014/05/04 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
中学推普周活动总结
2015/05/07 职场文书
django上传文件的三种方式
2021/04/29 Python
Python机器学习之底层实现KNN
2021/06/20 Python
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android