用canvas做一个画板

canvas：canvas是html新增，它提供了很多的API供用户调用，使得可以在网页中做出任意想做的动画样式

本章重点：canvas如何做一个画板

演示地址：http://xchengcheng.cn/static/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="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <title>随心画板</title>
    <meta name="description" content="随你心意，画你所想" />
    <meta name="keywords" content="随心，画板，画你所想" />
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }
      .canvas {
        position: fixed;
        top: 0;
        left: 0;
        background: #ddd;
      }
      .load {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: #fff;
        cursor: pointer;
      }
      .load:hover,
      .load:focus {
        background: #eee;
      }
    </style>
  </head>
  <body>
    <canvas class="canvas" width="800px" height="600px">
      版本过低
    </canvas>
    <div class="load">刷新</div>

    <script>
      console.log("小成出品");

      var load = document.querySelector(".load");
      //   点击刷新
      load.onclick = function() {
        location.reload();
      };
    </script>
    <script>
      /** @type {HTMLCanvasElement}  */
      var canvas = document.querySelector(".canvas");
      if (canvas.getContext) {
        //   设置画布宽高
        canvas.setAttribute("width", document.body.offsetWidth + "px");
        canvas.setAttribute("height", document.body.offsetHeight + "px");
        // 获取canvas上下文
        var ctx = canvas.getContext("2d");

        // 设置画笔样式
        ctx.strokeStyle = "orange";
        ctx.lineWidth = 2;

        if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
          //移动端
          canvas.ontouchstart = function(e) {
            ctx.beginPath();
            var x = e.changedTouches[0].clientX;
            var y = e.changedTouches[0].clientY;
            ctx.moveTo(x, y);

            canvas.ontouchmove = function(e) {
              var x = e.changedTouches[0].clientX;
              var y = e.changedTouches[0].clientY;
              ctx.lineTo(x, y);
              ctx.stroke();
            };
            document.ontouchend = function() {
              canvas.ontouchmove = null;
            };
          };
        } else {
          canvas.onmousedown = function(e) {
            ctx.beginPath();
            var x = e.clientX;
            var y = e.clientY;
            ctx.moveTo(x, y);

            canvas.onmousemove = function(e) {
              var x = e.clientX;
              var y = e.clientY;

              ctx.lineTo(x, y);
              ctx.stroke();
            };
            document.onmouseup = function() {
              canvas.onmousemove = null;
            };
          };
        }
      } else {
        alert("请升级浏览器版本");
      }
    </script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?3a311123b2a6fb77f7d9d9a66e220f2c";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

  </body>
</html>

 

上面代码是演示地址中案例的代码，该案例可以在PC端和移动端使用，效果是点击鼠标移动可以画出自己想要的图形。

有基础的朋友如果有兴趣可以研究下，还是很容易看懂的，有什么疑问的可以在评论区留言。

喜欢点赞哦

posted @ 2020-02-05 11:39  东晨下山v  阅读(558)  评论(0)  编辑  收藏  举报