多轴对称画板demo

吾很忧烦
吾很忧烦 发布于 2017-02-15 16:50:04 浏览:1414 类型:原创 - 随笔 分类:HTML/CSS - demo 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title>画板</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, email=no">
    <script src="//cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <style>
      #iCanvas {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: block;
          margin: auto;
          border: 1px solid #ddd;
      }
      
      .btn-wrap {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 10px;
          display: flex;
      }
      
      input[type='button'] {
          width: 100px;
          height: 50px;
          margin: auto;
          font-size: 26px;
      }
    </style>
  </head>
  <body>
    <canvas id="iCanvas" width="500" height="500"></canvas>
    <div class="btn-wrap">
      <input type="button" id="clear" value="clear">
      <input type="button" id="style1" value="1">
      <input type="button" id="style2" value="2">
      <input type="button" id="style3" value="3">
      <input type="button" id="style4" value="4">
    </div>
    <script>
      var canvas = document.getElementById('iCanvas');
      var ctx = canvas.getContext('2d');
      var width = canvas.width, height = canvas.height;
      var isDraw = false, type = 4;
      var points = {num: 0, prev: [], now: []};
      
      var initialFrame = function () {
          ctx.lineWidth = 1;
          ctx.strokeStyle = "#ddd";
          ctx.beginPath();
          ctx.moveTo(width / 2, 0);
          ctx.lineTo(width / 2, height);
          ctx.stroke();
          ctx.beginPath();
          ctx.moveTo(0, height / 2);
          ctx.lineTo(width, height / 2);
          ctx.stroke();
          ctx.beginPath();
          ctx.moveTo(0, 0);
          ctx.lineTo(width, height);
          ctx.stroke();
          ctx.beginPath();
          ctx.moveTo(0, height);
          ctx.lineTo(width, 0);
          ctx.stroke();
      };
      
      initialFrame();
      
      var paint = function (e) {
          if (e.type === 'mousedown') {
              isDraw = true;
              savePoints(0, {x: e.offsetX, y: e.offsetY});
              draw();
          } else if (e.type === 'mouseup') {
              isDraw = false;
              ctx.strokeStyle = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
          } else if (e.type === 'mousemove' && isDraw) {
              savePoints(1, {x: e.offsetX, y: e.offsetY});
              draw();
          }
      };
      
      var savePoints = function (state, point) {
          var styleArr = [
              {x: point.x, y: point.y},
              {x: width - point.x, y: point.y},
              {x: point.x, y: height - point.y},
              {x: width - point.x, y: height - point.y},
              {x: point.y, y: point.x},
              {x: width - point.y, y: point.x},
              {x: point.y, y: height - point.x},
              {x: width - point.y, y: height - point.x}];
      
          switch (type) {
              case 0:
                  style(state, [styleArr[0]]);
                  break;
              case 1:
                  style(state, [styleArr[0], styleArr[1]]);
                  break;
              case 2:
                  style(state, [styleArr[0], styleArr[2]]);
                  break;
              case 3:
                  style(state, [styleArr[0], styleArr[1], styleArr[2], styleArr[3]]);
                  break;
              case 4:
                  style(state, styleArr);
                  break;
          }
      
          function style(state, arr) {
              points.num = arr.length;
              for (var i = 0; i < points.num; i++) {
                  if (state === 0) {
                      points.prev[i] = points.now[i] = arr[i];
                  } else {
                      points.prev[i] = points.now[i];
                      points.now[i] = arr[i];
                  }
              }
          }
      };
      
      var draw = function () {
          ctx.lineWidth = 2;
      
          for (var i = 0; i < points.num; i++) {
              ctx.beginPath();
              ctx.moveTo(points.prev[i].x, points.prev[i].y);
              ctx.lineTo(points.now[i].x, points.now[i].y);
              ctx.stroke();
          }
      };
      
      var clear = function () {
          ctx.clearRect(0, 0, width, height);
          initialFrame();
          ctx.lineWidth = 2;
          ctx.strokeStyle = "#ddd";
      };
      
      var styleChange = function () {
          type = +$(this).val();
      };
      
      var event = function () {
          $('body').on('mouseup mousemove mousedown', '#iCanvas', paint)
                  .on('click', '#clear', clear)
                  .on('click', '[id*=style]', styleChange);
      };
      
      event();
    </script>
  </body>
</html>
标签:
z
给个赞 39 人点赞
收藏 40 人收藏
评论 已有 7 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
ablikim915
ablikim9152017-02-25 17:26:457F
不错啊 一只很想学canvas 没时间 canvas做出来的效果都很酷
举报 支持 (0) 回复 (0)
外太空星人
外太空星人2017-02-23 15:15:346F
即时自己的画技渣渣,可是对称起来感觉也好好看
举报 支持 (0) 回复 (0)
瑶池
瑶池2017-02-21 17:53:265F
举报 支持 (0) 回复 (0)
panio123
panio1232017-02-18 12:20:404F
恩,是挺好玩的。。emoticon
举报 支持 (0) 回复 (0)
Leebours
Leebours2017-02-16 09:52:573F
感觉好好玩哈哈
举报 支持 (0) 回复 (0)
老姚
老姚2017-02-15 19:41:032F
百度了一下,叫binary land(企鹅先生),后面老难了!!! //@老姚:想起了,小时候玩的那块两只企鹅游戏,可以切换操作某只,二者成镜像运动,同时到达某个地方。
举报 支持 (0) 回复 (0)
老姚
老姚2017-02-15 19:36:301F
想起了,小时候玩的那块两只企鹅游戏,可以切换操作某只,二者成镜像运动,同时到达某个地方。
举报 支持 (0) 回复 (1)
吾很忧烦 吾很忧烦 作者

作者最新