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

2019-11-20 10:17:42

字体：大中小

来源：转载

供稿：网友

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

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

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

效果如下：

主要代码如下：

<!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切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

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

上一篇：JS简单编号生成器实现方法(附demo源码下载)

下一篇：JavaScript图像延迟加载库Echo.js