画板、H5canvas制作画板源文件免费下载

SKL_CSDN
于 2021-11-29 19:26:44 发布
阅读量312
点赞数
文章标签： javascript css3 css
本文链接：https://blog.csdn.net/SKL_CSDN/article/details/121612388
版权
不要羡慕作者的画画技术
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画板</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="./css/reset.css" type="text/css">
</head>
   <style>
        *{margin:0;padding:0;}
        body{background: #000;}
        ul,ol{list-style: none;}
        article{
            width:600px;
            height:500px;
            margin:0 auto;
            border:20px solid rgb(124, 93, 57);
            border-radius:20px;
            background:rgb(124, 93, 57);
        }
       .box{
           width:500px;
           height:500px;
           float: left;
           position: relative;
       }
       #cv{background:#fff;cursor: pointer;}
       aside{
           width:80px;
           height:500px;
           /* border-left:10px solid rgba(124,93,57); */
           box-sizing: border-box;
           background: rgb(209, 157, 98);
           text-align:center;
           float:right;
           position: relative;
       }
       aside .tit{
           border-bottom:5px solid rgb(124, 93, 57);
           line-height:20px;
           width:80px;
           height:20px;
           float: left;
       }
       .list-box{
           width:80px;
           float: left;
       }
       .list-box li{
           width:100%;
           height:60px;
           border-bottom:5px solid rgb(124, 93, 57);
           display:flex;
           justify-content: center;
           align-items: center;
       }
       .list-box li img{cursor: pointer;}
       .list-box li:hover{
           background: rgb(179, 132, 79);
       }
       .list-box .on{background: rgb(179, 132, 79);}
       .debug{
           width:200px;
           height:150px;
           background: rgb(245, 188, 124);
           border:5px solid rgb(124,93,57);
           position:absolute;
           top:0px;
           left:102px;
           font-weight:bolder;
       }
       .debug .t-s{
           position:absolute;
           left:50%;
           top:25px;
           margin-left:-75px;
           width:150px;
           height:80px;
           background:aqua;
           cursor: pointer;
           border-radius:10px;
       }
       .debug .t-s li{
           width:100%;
           height:100%;
           position:absolute;
           top:0;
           left:0;
           background:rgb(235, 197, 114);
           border-radius:10px;
           display:flex;
           text-align: left;
           align-items: center;
           justify-content: center;
       }
       .col{
           width:0px;
           height:0px;
           border:none;
           position: relative;
           z-index:-1;
       }
       .colVal{
           width:20px;
           height:14px;
           position: relative;
           top:-3px;
           left:5px;
           font-size: 12px;
           text-align: center;

       }
       .range{width:80px;}
       .xpc{
           position: absolute;
           width:50px;
           height:50px;
           background:rgba(0,0,0,0.5);
           z-index:2;
           display: none;
       }
       .zz{
           width:100%;
           height:100%;
           position:absolute;
           top:0;
           left:0;
           cursor: move;
           z-index:5;
           display:none;
       }
   </style>
<body>
    <article>
       <div class="box">
           <div class="zz"></div>
           <span class="xpc"></span>
           <canvas id="cv" width="500" height="500"></canvas>
       </div>
       <aside>
           <h4 class="tit">菜单</h4>
           <ul class="list-box">
               <li class="hb on" title="画笔"> <img src="./img/hb.png" alt="画笔"> </li>
               <li class="xp" title="橡皮擦"><img src="./img/xp.png" alt="橡皮擦"></li>
               <li title="色板">
                   <label for="col"><img src="./img/col.png" alt="色板"></label>
                   <input type="color" id="col" class="col">
               </li>
               <li class="clearBox" title="清空">清空</li>
           </ul>
           <div class="debug">
               <p class="z-b">坐标(0,0)</p>
               <ul class="t-s">
                    <li> 
                      <p>大小: <input type="range" min='0' max="100" value="1" step="0" class="range"><input type="text" class="colVal" value="1"></p>                       
                    </li>
               </ul>
           </div>
        </aside>
    </article>
</body>
   <script>
    var flog = false;
    var flog1 = false;
    var c = document.getElementById("cv");
    var cxt = c.getContext("2d");
    cxt.lineWidth = $(".range").val();
    $(".col").on("input",function(){
        if($(".hb").hasClass("on")){cxt.strokeStyle = $(this).val()}
    })
    $(".range").on("input",function(event){
        event.preventDefault();
        cxt.lineWidth = $(this).val()
        $(".colVal").val($(this).val())
    })
    $(".colVal").on("input",function(){
        cxt.lineWidth = $(this).val()
        $(".range").val($(this).val())
    })
    $(".xp").on("click",function(){
        cxt.strokeStyle = "#fff"
        $(this).addClass("on").prev().removeClass("on")

    })
    $(".hb").on("click",function(){
        cxt.strokeStyle = $(".col").val();
        $(this).addClass("on").next().removeClass("on")
    })
    $(".clearBox").click(function(){
        cxt.clearRect(0,0,c.width,c.height)
    })
    $("#cv").on({
        mousedown:function(e){
               var x = e.clientX - $("#cv").offset().left
               var y = e.clientY - $("#cv").offset().top
               cxt.beginPath();
               cxt.moveTo(x,y);
               $(document).on({
                    mousemove:function(e){
                           var x = e.clientX - $("#cv").offset().left
                           var y = e.clientY - $("#cv").offset().top
                           cxt.lineTo(x,y);
                           cxt.stroke();
                    },
                    mouseup:function(){
                           $(document).off("mousemove");
                    }
               })
        },
        mousemove:function(e){
            $(".z-b").html("坐标("+e.offsetX+","+e.offsetY+")")
        }
    })
   </script>
</html>