<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<style>
*{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
body{
background: #000;
}
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>
评论0