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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
Javascript 面向对象 继承
May 13 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
React Native项目框架搭建的一些心得体会
May 28 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 上传功能实例代码
2010/04/13 PHP
php中的三元运算符使用说明
2011/07/03 PHP
基于php-fpm的配置详解
2013/06/03 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
小试JQuery的AutoComplete插件
2011/05/04 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
js友好的时间返回函数
2016/08/24 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
python基于event实现线程间通信控制
2020/01/13 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
幼儿园五一活动方案
2014/02/07 职场文书
白血病募捐倡议书
2014/05/14 职场文书
2014年政教处工作总结
2014/12/20 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
大学体育课感想
2015/08/10 职场文书
2019销售早会主持词
2019/06/27 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
2022年四月新番
2022/03/15 日漫