轻松画任意三角形，你需要一个小工具。
程序员文章站
2022-07-09 18:36:46
点击拖动中间小点，得到你想要的三角形形状，获取每条边框的宽度，把其余的三条边设为透明色，就得到了你想要的三角形，是不是很方便？拿走不谢， ......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{background: #000;}
.main{width:600px;height:400px;border: 1px solid blue;margin:0 auto;position: relative;background: #fff;}
.dian{width:5px;height:5px;background: black;box-shadow: 0 0 20px 1px red;position: absolute;left:297px;top:197px;/*border-width:197px 297px 197px 297px;border-style: solid;border-color:#222 #444 #666 #888;*/}
.line1{width:361px;height:0;border: 1px solid blue;position: absolute;left:0;top:0;transform-origin:left center;transform:rotateZ(33.69deg);}
.line2{width:361px;height:0;border:1px solid red;position: absolute;right:0px;top:0;transform-origin:right center;transform:rotateZ(-33.69deg);}
.line3{width:361px;height:0;border:1px solid black;position: absolute;left:0;bottom:0;transform-origin:left center;transform:rotateZ(-33.69deg);}
.line4{width:361px;height:0;border:1px solid green;position: absolute;right:0;bottom:0;transform-origin:right center;transform:rotateZ(33.69deg);}
.p1{position: absolute;top:0;left:300px}
.p2{position: absolute;top:200px;right:0;}
.p3{position: absolute;bottom:0;left:300px}
.p4{position: absolute;left:0;top:200px}
.p5{font-size: 40px;color:#fff;text-indent: 150px;}
</style>
</head>
<body>
<div class="main">
<p class="p1">200</p>
<p class="p2">300</p>
<p class="p3">200</p>
<p class="p4">300</p>
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="dian"></div>
</div>
<p class="p5">点击拖动中间小点，获取每条边宽度，画出任意形状三角形</p>
<script type="text/javascript">
var main=document.querySelector('.main');
var line1=document.querySelector('.line1');
var line2=document.querySelector('.line2');
var line3=document.querySelector('.line3');
var line4=document.querySelector('.line4');
var dian=document.querySelector('.dian');
var ap=document.querySelectorAll('p');
var x1,x2,y1,y2,tan1,tan2,tan3,tan4,l1,l2,l3,l4;
dian.onmousedown=function (ev){
var ev=ev||event;
x1=ev.clientX-main.offsetLeft;
y1=ev.clientY-main.offsetTop;
l1=Math.round(Math.sqrt(x1*x1+y1*y1));
tan1=Math.atan(y1/x1)*180/Math.PI;
line1.style.width=l1+'px';
line1.style.transform='rotateZ('+tan1+'deg)';
// ...................................................
x2=600-x1;
l2=Math.round(Math.sqrt(x2*x2+y1*y1));
tan2=Math.atan(y1/x2)*180/Math.PI;
line2.style.width=l2+'px';
line2.style.transform='rotateZ(-'+tan2+'deg)';
// ......................................................
y2=400-y1;
l3=Math.round(Math.sqrt(x1*x1+y2*y2));
tan3=Math.atan(y2/x1)*180/Math.PI;
line3.style.width=l3+'px';
line3.style.transform='rotateZ(-'+tan3+'deg)';
// .....................................................
l4=Math.round(Math.sqrt(x2*x2+y2*y2));
tan4=Math.atan(y2/x2)*180/Math.PI;
line4.style.width=l4+'px';
line4.style.transform='rotateZ('+tan3+'deg)';
document.onmousemove=function (ev){
var ev=ev||event;
var x=ev.clientX-main.offsetLeft;
var y=ev.clientY-main.offsetTop;
if(x<0){x=0;dian.style.left=x+'px';}else if(x>595){
x=595;dian.style.left=x+'px';
}else{dian.style.left=x+'px';}
if(y<0){y=0;dian.style.top=y+'px';}else if(y>395){
y=395;dian.style.top=y+'px';
}else{dian.style.top=y+'px';}
l1=Math.round(Math.sqrt(x*x+y*y));
tan1=Math.atan(y/x)*180/Math.PI;
line1.style.width=l1+'px';
line1.style.transform='rotateZ('+tan1+'deg)';
// ..............................................
x2=600-x1;
l2=Math.round(Math.sqrt((600-x)*(600-x)+y*y));
tan2=Math.atan(y/(600-x))*180/Math.PI;
line2.style.width=l2+'px';
line2.style.transform='rotateZ(-'+tan2+'deg)';
// ..................................................
y2=400-y1;
l3=Math.round(Math.sqrt(x*x+(400-y)*(400-y)));
tan3=Math.atan((400-y)/x)*180/Math.PI;
line3.style.width=l3+'px';
line3.style.transform='rotateZ(-'+tan3+'deg)';
// ..................................................
l4=Math.round(Math.sqrt((600-x)*(600-x)+(400-y)*(400-y)));
tan4=Math.atan((400-y)/(600-x))*180/Math.PI;
line4.style.width=l4+'px';
line4.style.transform='rotateZ('+tan4+'deg)';
// .............................................
ap[0].innerText=y;
ap[1].innerText=600-x;
ap[2].innerText=400-y;
ap[3].innerText=x;
};
document.onmouseup=function (){
document.onmousedown=null;
document.onmousemove=null;
};
};
</script>
点击拖动中间小点，得到你想要的三角形形状，获取每条边框的宽度，把其余的三条边设为透明色，就得到了你想要的三角形，是不是很方便？拿走不谢，