用html+js的canvas创建一个画板【建议收藏】

最新推荐文章于 2024-04-21 19:16:56 发布

沐阳gg

最新推荐文章于 2024-04-21 19:16:56 发布

阅读量775

点赞数 5

分类专栏： html从入门到入土文章标签： html javascript css

本文链接：https://blog.csdn.net/qq_52545155/article/details/129159122

版权

html从入门到入土专栏收录该内容

36 篇文章 10 订阅

订阅专栏

在浏览器创建一个画板，可以随意涂涂画画，还可以下载自己画好的作品，简单实用

1、效果展示

2、代码分享

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input[type=range] {
      -webkit-appearance: none;
    }

    input[type=range]:focus {
      outline: none;
    }

    /*chrome、safari浏览器*/
    input[type='range']::-webkit-slider-runnable-track {
      background-color: #eee;
    }

    /*firefox浏览器*/
    input[type='range']::-moz-range-track {
      background-color: #eee;
    }

    /*IE浏览器*/
    input[type="range"]::-ms-track {
      color: transparent;
      /*去除轨道内竖线*/
      border-color: transparent;
      /*去除原有边框*/
      background-color: #eee;
    }

    /*chrome，safar等浏览器设置*/
    input[type='range']::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: 3px solid #fff;
      height: 7px;
      width: 7px;
      border-radius: 8px;
      background: #000;
      cursor: pointer;
    }

    /*firefox 浏览器设置*/
    input[type='range']::-moz-range-thumb {
      border: 3px solid #fff;
      height: 7px;
      width: 7px;
      border-radius: 8px;
      background: #000;
      cursor: pointer;
    }

    /*IE浏览器设置*/
    input[type='range']::-ms-thumb {
      border: 3px solid #fff;
      height: 7px;
      width: 7px;
      border-radius: 8px;
      background: #000;
      cursor: pointer;
    }

    /*firefox浏览器已填充部分*/
    input[type=range]::-moz-range-progress {
      background: linear-gradient(to right, #000, white 100%, white);
      height: 20px;
      border-radius: 10px;
    }

    /*IE浏览器*/
    /*滑道未填充的部分*/
    input[type=range]::-ms-fill-upper {
      height: 20px;
      border-radius: 10px;
      background: #ffffff;
    }

    /*滑道已填充的部分*/
    input[type=range]::-ms-fill-lower {
      height: 20px;
      border-radius: 10px;
      background: linear-gradient(to right, red, white 100%, white);
    }

    .button {
      width: 200px;
      /*设置按钮宽度*/
      height: 30px;
      /*设置按钮高度*/
      color: white;
      /*字体颜色*/
      background-color: #000;
      /*按钮背景颜色*/
      border-radius: 3px;
      /*让按钮变得圆滑一点*/
      border-width: 0;
      /*消去按钮丑的边框*/
      margin: 0;
      outline: none;
      /*取消轮廓*/
      font-family: KaiTi;
      /*字体设置为楷体*/
      font-size: 17px;
      /*设置字体大小*/
      text-align: center;
      /*字体居中*/
      cursor: pointer;
      /*设置鼠标箭头手势*/
    }

    .button:hover {
      /*鼠标移动时的颜色变化*/
      background-color: #fff;
          color: #000;
    }
  </style>
</head>

<body>

  <div class="" style="width: 50%; margin: 10px auto;">
    <span>解压画板</span>
    <input type="range" id="myRange" class="bold btn" onchange="checkpen()" />
    <input type="color" id="onchange" class="red item" style="border: none;" onclick="changecolor()" />
    <input type="button" value="清除画布" class="button" onclick="clearb()" />
    <button class="button" id="downloadImageBtn">下载图片</button>
  </div>

  <div class="" style="width:1500px; margin: 10px auto;">
    <canvas id="canvas" width="1500px" height="650px" style="border: 1px solid #000;"></canvas>
  </div>


  <script>
    let canvas = document.getElementById('canvas');
    let cvs = canvas.getContext('2d');
    let drawing = false;

    // 初始化
    window.onload = function () {
      init()
    }

    function init() {
      let penWeight = 0;  // 画笔粗细
      let penColor = '';  // 画笔颜色

      canvas.onmousedown = function (e) {
        /*
          找到鼠标（画笔）的坐标
        */
        let start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
        let start_y = e.clientY - canvas.offsetTop + document.body.scrollTop;

        // 开始本次绘画
        cvs.beginPath();
        // 画笔起始点
        cvs.moveTo(start_x, start_y);

        // 设置画笔属性

        // 线条端点的形状
        cvs.lineCap = 'round';
        // 线条交点的形状
        cvs.lineJoin = "round";
        // 画笔颜色
        cvs.strokeStyle = penColor;
        // 画笔粗细
        cvs.lineWidth = penWeight;

        canvas.onmousemove = function (e) {
          // 找到鼠标（画笔）的坐标
          let move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
          let move_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
          // 根据鼠标路径绘画 
          cvs.lineTo(move_x, move_y);
          //立即渲染
          cvs.stroke();
        }
        canvas.onmouseup = function (e) {
          // 鼠标抬起，结束本次绘画
          cvs.closePath();  
          canvas.onmousemove = null;
          canvas.onmouseup = null;
        }
        canvas.onmouseleave = function () {
          // 鼠标离开，结束本次绘画
          cvs.closePath();
          canvas.onmousemove = null;
          canvas.onmouseup = null;
        }
      }
      // 保存图片
      let dlButton = document.getElementById("downloadImageBtn");
      bindButtonEvent(dlButton, "click", saveAsLocalImage)
    }
    function bindButtonEvent(element, type, handler) {
      if (element.addEventListener) {
        element.addEventListener(type, handler, false);
      } else {
        element.attachEvent('on' + type, handler);
      }
    }

    // 保存图片
    function saveAsLocalImage() {
      let myCanvas = document.getElementById("canvas");
      // 保存为 image/png 格式
      let image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
      window.location.href = image;
    }

    //设置笔的粗细
    function checkpen() { 
      let width = document.getElementById("myRange").value
      cvs.lineWidth = width;
    }
    //设置颜色
    function changecolor() { 
      document.getElementById('onchange').onchange = function () {
        document.getElementById('onchange').click();
        cvs.strokeStyle = this.value;
      };
    }
    //清除画布功能
    function clearb() {
      cvs.clearRect(0, 0, 1500, 800);
    }
  </script>
</body>

</html>