輕鬆畫任意三角形，你需要一個小工具。

来源:https://www.cnblogs.com/fiear/archive/2018/02/28/8485403.html
-Advertisement-
Play Games

點擊拖動中間小點，得到你想要的三角形形狀，獲取每條邊框的寬度，把其餘的三條邊設為透明色，就得到了你想要的三角形，是不是很方便？拿走不謝， ...


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

 點擊拖動中間小點，得到你想要的三角形形狀，獲取每條邊框的寬度，把其餘的三條邊設為透明色，就得到了你想要的三角形，是不是很方便？拿走不謝，


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • css佈局之聖杯篇
    主要思路：center-->left-->right。 ...
  • jquery添加html代碼的幾種方法
    經常用jq來DOM添加html代碼 就總結了jq裡面最常用的動態添加html代碼的方法 append在元素內部的尾部加上元素 prepend在元素內部的前部加上元素 after在元素外部的尾部加上元素 before在元素外部的頭部加上元素 html用當前內容替換掉原內容 $(" id1")inser ...
  • css表格
    今天寫某個平臺的前端數據展示 主要使用表格展示 正好複習總結一下css的表格 首先說說thead、tbody、tfoot 無論前後順序如何改變， 內的元素總是在表的最上面， 總在表的最下麵 可能會有人分不清 tr th td tr: table row = 表格中的一行 th: table head ...
  • JavaScript 中，定義函數時用 var foo = function () {} 和 function foo() 有什麼區別？
    某天寫代碼突然縣道這個問題,順勢總結一波 JavaScript 函數和變數聲明的“提前”（hoist）行為 簡單的說 如果我們使用 匿名函數 var a = {} 這種方式， 編譯後變數聲明a 會“被提前”了，但是他的賦值（也就是a）並不會被提前。 也就是，匿名函數只有在被調用時才被初始化。 如果使 ...
  • Markdown常用語法
    1、標題類 標題是每篇文章最常用的格式，在Markdown中，如果使一段文字定義為標題，則只要在這段文字前加“#”號即可。如上圖所示。 總共有6級標題，建議在#號後添加一個空格符。 2、列表類 在文字前加“-”或“*”，即可變為無序列表； 在文字前加“1. ”、“2. ”...等數字元號，即可變為有 ...
  • 如何水平居中一個元素
    在項目中經常會遇到居中問題，這裡借鑒度娘的眾多答案，做一個總結： 一、元素的水平居中 1、行級元素的水平居中 很明顯：子元素為行級元素時，只需要設置父元素 text-align:center 即可。 2、塊級元素的水平居中 很明顯：子元素為塊級元素時，只需要設置父元素 margin: 0 auto; ...
  • CSS佈局(四) float詳解
    一、float設計初衷 因為float被設計出來的初衷是用於——文字環繞效果。即，一個圖片一段文字，圖片float:left之後，文字會環繞圖片。 二、float多個特性 2.1. 破壞性 首先大家來看兩個demo，如下圖。第一個demo是一個簡單不過的例子，顯示效果也很正常。第二個demo，唯一的 ...
  • CSS——清除浮動的六種解決方案
    內容的高度撐起父元素容器的高度，效果圖如下HTML和CSS代碼如下給ｐ標簽加上浮動以後，ｐ｛float：left；｝，此時DIV塌陷，兩段內容同行顯示，效果如下： 解決方案一：給前面一個父元素設置高度 ！企業開發中，能不寫高度就不寫，所以這種方式用得很少解決方案二：給後面的盒子添加clear屬性； ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類