轻松画任意三角形,你需要一个小工具。

2018-03-01 07:46:12来源:cnblogs.com作者:李业锋人点击

分享
<!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>

 点击拖动中间小点,得到你想要的三角形形状,获取每条边框的宽度,把其余的三条边设为透明色,就得到了你想要的三角形,是不是很方便?拿走不谢,

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台