轻松画任意三角形,你需要一个小工具。
<!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)';
<!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;} .bian{width:1px;height:1px;border-width: 200px 300px 200px 300px;border-style: solid ;border-color:#222 #444 #666 #888;} </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 class="bian"></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 bian=document.querySelector('.bian'); 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; bian.style.borderTopWidth=y+'px'; bian.style.borderRightWidth=600-x+'px'; bian.style.borderBottomWidth=400-y+'px'; bian.style.borderLeftWidth=x+'px'; }; document.onmouseup=function (){ document.onmousedown=null; document.onmousemove=null; }; }; </script> </body> </html>
// ............................................. 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>
点击拖动中间小点,得到你想要的三角形形状,获取每条边框的宽度,把其余的三条边设为透明色,就得到了你想要的三角形,是不是很方便?拿走不谢。(第三张代码是最新改进后的 ,看的更直观)