JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)


Posted in Javascript onApril 05, 2016

本文实例讲述了JS基于ocanvas插件实现的简单画板效果。分享给大家供大家参考,具体如下:

使用ocanvas做了个简单的在线画板。

ocanvas参考:http://ocanvas.org/

效果如下:

JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)

主要代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>oCanvas Example</title>
  <meta name="robots" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <script src="http://libs.useso.com/js/zepto/1.1.3/zepto.min.js"></script>
  <script>
  var line_color = '#000';
  var line_size = 3;
  $(function(){
    $('.tool .color div').click(function(){
      $('.tool .color div').removeClass('active');
      $(this).addClass('active');
      line_color = $(this).data('color');
      mouseDot.fill = line_color;
    });
    $('.tool .size div').click(function(){
      $('.tool .size div').removeClass('active');
      $(this).addClass('active');
      line_size = $(this).data('size');
      mouseDot.radius = Math.max(line_size / 2, 3);
    });
  });
  </script>
  <style>
  body, html {padding:0; margin:0; overflow:hidden;}
  .tool{position:absolute; top:10px; left:10px; border:solid 1px #aaa; background-color:#eee; border-radius:5px; padding-right:5px;}
  .tool .color {float:left; margin:5px; width:30px;}
  .tool .color div{width:24px; height:24px; border:solid 2px #aaa; margin-bottom:5px; opacity:0.5;}
  .tool .color div:hover{opacity:1; cursor:pointer;}
  .tool .color .active{opacity:1; border:solid 2px #000;}
  .tool .size {float:left; margin:5px; width:30px; margin-left:0;}
  .tool .size div{width:30px; height:30px; border:solid 2px #aaa; margin-bottom:5px; opacity:0.5;}
  .tool .size div:hover{opacity:1; cursor:pointer;}
  .tool .size .active{opacity:1; border:solid 2px #000;}
  .tool .size span{display:block; margin:3px auto; height:24px; background-color:black;}
  .btn {clear:both; margin-bottom:5px; text-align:center;}
  .btn input {padding:3px 15px;}
  </style>
</head>
<body>
  <canvas id="canvas" width="200" height="100"></canvas>
  <div class="tool">
    <div class="color">
      <div style="background:#000;" data-color="#000" class="active"></div>
      <div style="background:#f00;" data-color="#f00"></div>
      <div style="background:#0f0;" data-color="#0f0"></div>
      <div style="background:#00f;" data-color="#00f"></div>
      <div style="background:#ff0;" data-color="#ff0"></div>
      <div style="background:#0ff;" data-color="#0ff"></div>
      <div style="background:#f0f;" data-color="#f0f"></div>
      <div style="background:#fff;" data-color="#fff"></div>
    </div>
    <div class="size">
      <div class="active" data-size="3" ><span style="width:3px;" ></span></div>
      <div data-size="6" ><span style="width:6px;" ></span></div>
      <div data-size="9" ><span style="width:9px;" ></span></div>
      <div data-size="12"><span style="width:12px;"></span></div>
      <div data-size="15"><span style="width:15px;"></span></div>
      <div data-size="20"><span style="width:20px;"></span></div>
      <div data-size="25"><span style="width:25px;"></span></div>
    </div>
    <div class="btn">
      <input type="button" value="清 空" onclick="clearAll();" />
    </div>
  </div>
  <script src="js/ocanvas-2.7.3.min.js"></script>
  <script>
  var c = document.querySelector("#canvas"),
  ctx = c.getContext("2d");
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  c.addEventListener("touchmove", function (e) { e.preventDefault(); }, false);
  var cs = oCanvas.create({
    canvas: "#canvas",
    background: "#fff",
    fps: 30,
    disableScrolling: true
  });
  var isDraw = false;
  var xx = 0;
  var yy = 0;
  var mouseDot;
  clearAll();
  cs.bind('mousedown', function(){
    drawBegin(cs.mouse.x, cs.mouse.y);
  }).bind('touchstart tap', function(){
    drawBegin(cs.touch.x, cs.touch.y);
  }).bind('mouseup touchend', function(){
    isDraw = false;
  }).bind('mousemove', function(){
    drawMove(cs.mouse.x, cs.mouse.y);
  }).bind('touchmove', function(){
    drawMove(cs.touch.x, cs.touch.y);
  });
  /*
  cs.setLoop(function () {
    mouseDot.x = cs.mouse.x;
    mouseDot.y = cs.mouse.y;
  }).start();
  */
  function drawBegin(x, y)
  {
    isDraw = true;
    xx = x;
    yy = y;
    var dot = cs.display.arc({
      x: x,
      y: y,
      radius: line_size / 2,
      start: 0,
      end: 360,
      fill: line_color
    });
    cs.addChild(dot);
  }
  function drawMove(x, y)
  {
    if (isDraw)
    {
      var line = cs.display.line({
        start: { x: xx, y: yy },
        end: { x: x, y: y },
        stroke: '' + line_size + 'px ' + line_color,
        cap: "round"
      });
      cs.addChild(line);
      xx = x;
      yy = y;
    }
    else
    {
      mouseDot.moveTo(x, y);
      cs.addChild(mouseDot);
      cs.draw.redraw();
    }
  }
  function clearAll()
  {
    cs.reset();
    // 处理鼠标
    cs.mouse.hide();
    mouseDot = cs.display.arc({
      x: -100,
      y: -100,
      radius: Math.max(line_size / 2, 3),
      start: 0,
      end: 360,
      fill: line_color,
      shadow: '0 0 5px #333'
    });
    cs.addChild(mouseDot);
  }
  </script>
</body>
</html>

完整实例代码点击此处本站下载。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
论JavaScript模块化编程
Mar 07 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
Vue实现选择城市功能
May 27 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
js实现验证码干扰(静态)
Feb 22 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 #Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 #Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 #Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 #Javascript
js拖拽的原型声明和用法总结
Apr 04 #Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 #Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 #Javascript
You might like
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python实现点对点聊天程序
2018/07/28 Python
python list格式数据excel导出方法
2018/10/31 Python
python爬取内容存入Excel实例
2019/02/20 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
我的未来不是梦演讲稿
2014/09/02 职场文书
工作检讨书怎么写
2014/10/10 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
中标通知书
2015/04/17 职场文书
信用卡工资证明范本
2015/06/19 职场文书
检讨书之工作不认真
2019/08/14 职场文书
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript