1. 首頁
  2. 問答
  3. 如何使用畫布在單頁中繪製三角形？

如何使用畫布在單頁中繪製三角形？

2016-09-06 71 views
1

如何使用畫布在單頁中繪製三角形？

function areaval() { 
 
    var equation = $('#number').val(); 
 
    var secod = $('#acure').val(); 
 
    var thrd = $('#pmet').val(); 
 
    var frd = $('#cmet').val(); 
 
    var a = Math.abs(parseInt(equation * secod)); 
 
    var d = Math.abs(a/2); 
 
    document.getElementById("result").innerHTML = "Area=(1/2)*b*h<br><br>A="+d+"cm2"; 
 
    document.getElementById("step4.1").innerHTML = "step1=(1/2)*"+equation+"*"+secod; 
 
    var f= Math.abs(parseInt(equation) + parseInt(thrd) + parseInt(frd)); 
 
    document.getElementById("result2.2").innerHTML = "Perimeter=a+b+c<br><br>P="+f+"cm2"; 
 
    document.getElementById("step4.6").innerHTML = "step2="+equation+"+"+thrd+"+"+frd; 
 
    $('input').val(''); 
 
    return false; 
 
} 
 

 
function rightang() { 
 
    var givenone = $('#oppsite').val(); 
 
    var giventwo = $('#adjacent').val(); 
 
    var giventhree = $('#hyper').val(); 
 
    var givenhig = $('#hidgt').val(); 
 
    var agive = Math.abs(parseInt(givenone * givenhig)); 
 
    var ragive = Math.abs((agive)/2); 
 
    document.getElementById("raitresult").innerHTML = "Area=(1/2)*b*h<br><br>A="+ragive+"cm2"; 
 
    document.getElementById("step5.1").innerHTML = "step1=(1/2)*"+givenone+"*"+givenhig; 
 
    var subperi = Math.abs((2*givenone)+(2*giventwo)); 
 
    var rtsub = Math.sqrt(subperi); 
 
    var srtadd = Math.floor(parseInt(givenone)+parseInt(giventwo)); 
 
    var finres = Math.floor(parseInt(rtsub)+parseInt(srtadd)); 
 
    document.getElementById("periresult2").innerHTML = "Perimeter=a+b+c<br><br>P="+finres+"cm2"; 
 
    document.getElementById("step5.5").innerHTML = "step2="+givenone+"+"+giventwo+"+"+giventhree; 
 
    var hysid = Math.floor(parseInt(finres)/parseInt(giventwo)); 
 
    var hyang = Math.abs(2*parseInt(hysid)); 
 
    document.getElementById("periresult3").innerHTML = "Angle of a=A*2/b<br><br>angle="+hyang+"degree"; 
 
    document.getElementById("step5.8").innerHTML = "step3="+hysid+"*"+"2"+"/"+givenone; 
 
    $('input').val(''); 
 
    return false; 
 
} 
 

 
function obtuseang() { 
 
    var oppavall = $('#oppsite6').val(); 
 
    var oppbval = $('#oppsite7').val(); 
 
    var obtont = $('#oppsite1').val(); 
 
    var obttwo = $('#oppsite2').val(); 
 
    var obttriagle = Math.abs(parseInt(obtont * obttwo)); 
 
    var obtval = Math.abs((obttriagle)/2); 
 
    document.getElementById("raitresult43").innerHTML = "Area=(1/2)*b*h<br><br>A="+obtval+"cm2"; 
 
    document.getElementById("step6.1").innerHTML = "step1=(1/2)*"+obtont+"*"+obttwo; 
 
    var obtperi = Math.abs(parseInt(oppavall)+parseInt(oppbval)+parseInt(obtont)); 
 
    document.getElementById("obtuseresult").innerHTML = "Perimeter=a+b+c<br><br>P="+obtperi+"cm2"; 
 
    document.getElementById("stepfine").innerHTML = "step2="+oppavall+"+"+oppbval+"+"+obtont; 
 
    $('input').val(''); 
 
    return false; 
 
}
#equilateral-try { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 128px solid transparent; 
 
    border-right: 48px solid transparent; 
 
    border-bottom: 95px solid black; 
 
    position:absolute; 
 
    top:100px; 
 
    left:100px; 
 
} 
 

 
#coverbox { 
 
    position:absolute; 
 
    top:calc(8%); 
 
    left:calc(3%); 
 
    width:300px; 
 
    height:500px; 
 
} 
 

 
#equilateral-try:after { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-left: 110px solid transparent; 
 
    border-right: 40px solid transparent; 
 
    content: ""; 
 
    border-bottom: 80px solid #fff; 
 
    position:absolute; 
 
    top:10px; 
 
    left:-110px; 
 
    z-index:1; 
 
} 
 

 
#strightline { 
 
    position:absolute; 
 
    left:66%; 
 
    top:22%; 
 
    z-index:2; 
 
} 
 

 
#right-try { 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 100px solid black; 
 
    border-right: 100px solid transparent; 
 
    position:absolute; 
 
    top:16%; 
 
    left:45%; 
 
} 
 

 
#coverbox11 { 
 
    position:absolute; 
 
    top:calc(8%); 
 
    left:calc(30%); 
 
    width:300px; 
 
    height:500px; 
 
} 
 

 
#right-try:after { 
 
    width: 100%; 
 
    height: 100%; 
 
    content: ""; 
 
    border-bottom: 85px solid #fff; 
 
    border-right: 85px solid transparent; 
 
    position:absolute; 
 
    top:12px; 
 
    left:6px; 
 
    z-index:6; \t 
 
} 
 

 
#obtuse-try { 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 100px solid black; 
 
    border-left: 140px solid transparent; 
 
    position:absolute; 
 
    top:17%; 
 
    left:20%; 
 
} 
 

 
#coverbox12 { 
 
    position:absolute; 
 
    top:calc(8%); 
 
    left:calc(65%); 
 
    width:300px; 
 
    height:500px; 
 
} 
 

 
#obtuse-try:after { 
 
    width: 100%; 
 
    height: 100%; 
 
    content: ""; 
 
    border-bottom: 80px solid #fff; 
 
    border-left: 120px solid transparent; 
 
    position:absolute; 
 
    top:14px; 
 
    left:-125px; 
 
    z-index:8; 
 
} 
 

 
#strightline3 { 
 
    position:absolute; 
 
    left:68.8%; 
 
    top:16%; 
 
    z-index:9; 
 
}
<html> 
 
<head> 
 
    <script src="angleoftriangle.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="angleoftriangle.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="coverbox"> 
 
    <div id="equilateral-try"> 
 
    </div> 
 
    <form id="text" onsubmit="return areaval()"> 
 
     <p id="heading1"style="position:absolute;top:8%;left:20%;font-size:22px;color:black;">Acute Triangle</p> 
 
     <p id="heading5"style="position:absolute;top:42%;left:20%;font-size:20px;color:black;">abc<90deg.</p> 
 
     <input type="text" value ="" id="number" style="position:absolute;width:8%;height:4%;left:60%;top:40%;outline:none;border:none;font-size:25px;background-color:transparent;" placeholder="b"required> 
 
     <input type="text" value ="" id="acure" style="position:absolute;width:8%;height:4%;left:78%;top:31%;outline:none;border:none;font-size:25px;z-index:4;background-color:transparent;" placeholder="h"required> 
 
     <input type="text" value ="" id="pmet" style="position:absolute;width:8%;height:4%;left:42%;top:25%;outline:none;border:none;font-size:25px;z-index:6;background-color:transparent;" placeholder="a"required> 
 
     <input type="text" value ="" id="cmet" style="position:absolute;width:8%;height:4%;left:88%;top:25%;outline:none;border:none;font-size:25px;z-index:5;background-color:transparent;" placeholder="c"required> 
 
     <button style="position:absolute;height:20px;left:70%;top:41%;">sol</button> 
 
    </form> 
 
    <div id="result"style="position:absolute;top:55%;left:20%;font-size:20px;color:#878787;"></div> 
 
    <div id="step4.1"style="position:absolute;top:60%;left:20%;font-size:20px;color:#878787;"></div> 
 
    <div id="result2.2"style="position:absolute;top:68%;left:20%;font-size:20px;color:#878787;"></div> 
 
    <div id="step4.6"style="position:absolute;top:73%;left:20%;font-size:20px;color:#878787;"></div> 
 
    <svg height="16%" width="14%"id="strightline"> 
 
     <line x1="30" y1="0" x2="30" y2="105" style="stroke:black;stroke-width:2" /> 
 
    </svg> 
 
</div> 
 

 
<div id="coverbox11"> 
 
    <div id="right-try"> 
 
    </div> 
 
    <form id="text1" onsubmit="return rightang()"> 
 
     <p id="heading1"style="position:absolute;top:7%;left:32%;font-size:22px;color:black;">Rightangle Triangle</p> 
 
     <p id="heading5"style="position:absolute;top:42%;left:43%;font-size:20px;color:black;"> a=90degree.</p> 
 
     <input type="text" value ="" id="oppsite" style="position:absolute;width:8%;height:4%;left:38%;top:23%;outline:none;border:none;font-size:25px;background-color:transparent;" placeholder="a"required> 
 
     <input type="text" value ="" id="hidgt" style="position:absolute;width:8%;height:4%;left:48%;top:23%;outline:none;border:none;font-size:25px;z-index:20;background-color:transparent;" placeholder="h"required> 
 
     <input type="text" value ="" id="adjacent" style="position:absolute;width:8%;height:4%;left:53%;top:37%;outline:none;border:none;font-size:25px;z-index:4;background-color:transparent;" placeholder="b"required> 
 
     <input type="text" value ="" id="hyper" style="position:absolute;width:8%;height:4%;left:68%;top:23%;outline:none;border:none;font-size:25px;z-index:6;background-color:transparent;" placeholder="c"required> 
 
     <button style="position:absolute;height:20px;left:64%;top:38%;">sol</button> 
 
    </form> 
 
    <div id="raitresult"style="position:absolute;top:55%;left:43%;font-size:20px;color:#878787;"></div> 
 
    <div id="step5.1"style="position:absolute;top:60%;left:43%;font-size:20px;color:#878787;"></div> 
 
    <div id="periresult2"style="position:absolute;top:70%;left:43%;font-size:20px;color:#878787;"></div> 
 
    <div id="step5.5"style="position:absolute;top:75%;left:43%;font-size:20px;color:#878787;"></div> 
 
    <div id="periresult3"style="position:absolute;top:85%;left:43%;font-size:20px;color:#878787;"></div> 
 
    <div id="step5.8"style="position:absolute;top:90%;left:43%;font-size:20px;color:#878787;"></div> 
 
</div> 
 

 
<div id="coverbox12"> 
 
    <div id="obtuse-try"> 
 
    </div> 
 
    <svg height="15%" width="15%"id="strightline3"> 
 
     <path id="lineAB" d="M 100 150 l 70 -200" stroke="black" stroke-width="2" fill="none" /> 
 
    </svg> 
 
    <form id="text2" onsubmit="return obtuseang()"> 
 
     <p id="heading16"style="position:absolute;top:8%;left:20%;font-size:22px;color:black;">Obtuse Triangle</p> 
 
     <p id="heading17"style="position:absolute;top:42%;left:30%;font-size:20px;color:black;">a>90degree.</p> 
 
     <input type="text" value ="" id="oppsite1" style="position:absolute;width:8%;height:4%;left:48%;top:38%;outline:none;border:none;font-size:25px;background-color:transparent;" placeholder="b"required> 
 
     <input type="text" value ="" id="oppsite2" style="position:absolute;width:8%;height:4%;left:58%;top:28%;outline:none;border:none;font-size:25px;z-index:16;background-color:transparent;" placeholder="h"required> 
 
     <input type="text" value ="" id="oppsite6" style="position:absolute;width:8%;height:4%;left:71%;top:23%;outline:none;border:none;font-size:25px;z-index:16;background-color:transparent;" placeholder="c"required> 
 
     <input type="text" value ="" id="oppsite7" style="position:absolute;width:8%;height:4%;left:36%;top:23%;outline:none;border:none;font-size:25px;z-index:16;background-color:transparent;" placeholder="a"required> 
 
     <button style="position:absolute;height:20px;left:58%;top:39%;">sol</button> 
 
    </form> 
 
    <div id="raitresult43"style="position:absolute;top:55%;left:30%;font-size:20px;color:#878787;"></div> 
 
    <div id="step6.1"style="position:absolute;top:60%;left:30%;font-size:20px;color:#878787;"></div> 
 
    <div id="obtuseresult"style="position:absolute;top:70%;left:30%;font-size:20px;color:#878787;"></div> 
 
    <div id="stepfine"style="position:absolute;top:75%;left:30%;font-size:20px;color:#878787;"></div> 
 
</div> 
 

 
<p id="heading19"style="position:absolute;top:-1%;left:30%;font-size:28px;color:blue;">Different types of triangle in angle method.</p> 
 
</body> 
 
</html>

我有在產生用於繪製的三角形形狀的CSS代碼三角形形狀計算器一些代碼。但我想使用畫布方法在三角形中繪製不同的形狀。我如何將CSS中的編程代碼更改爲畫布？

來源

2016-09-06 pram

+0

不是你問什麼，但在當前的代碼中的銳角和鈍角三角形的兩個看起來像直角三角形。 – nnnnnn

+0

https://www.kirupa.com/html5/drawing_triangles_on_the_canvas.htm //此鏈接可能對您有所幫助 –

+0

@pram您的所有答案都是正確的。對於每個需要的三角形：'beginPath + moveTo + lineTo + lineTo'。你必須爲你的3個三角形中的每一個重複這個模式。 ;-) – markE

回答

1

`

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Triangle Canvas Example</title> 
 
</head> 
 
<body> 
 
<canvas id="myCanvas" width="500" height="500"></canvas> 
 
<script> 
 
var canvasElement = document.querySelector("#myCanvas"); 
 
var context = canvasElement.getContext("2d"); 
 
    
 
// the triangle 
 
context.beginPath(); 
 
context.moveTo(200, 100); 
 
context.lineTo(100, 300); 
 
context.lineTo(300, 300); 
 
context.closePath(); 
 
    
 
// the outline 
 
context.lineWidth = 10; 
 
context.strokeStyle = '#666666'; 
 
context.stroke(); 
 
    
 
// the fill color 
 
context.fillStyle = "#FFCC00"; 
 
context.fill(); 
 
    </script> 
 
</body> 
 
</html>

`試試這個

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Triangle Canvas Example</title> 
</head> 
<body> 
    <canvas id="myCanvas" width="500" height="500"></canvas> 



</body> 
</html>

的javascript：

var canvasElement = document.querySelector("#myCanvas"); 
var context = canvasElement.getContext("2d"); 

// the triangle 
context.beginPath(); 
context.moveTo(100, 100); 
context.lineTo(100, 300); 
context.lineTo(300, 300); 
context.closePath(); 

// the outline 
context.lineWidth = 10; 
context.strokeStyle = '#666666'; 
context.stroke(); 

// the fill color 
context.fillStyle = "#FFCC00"; 
context.fill();

來源

2016-09-06 06:04:34

+0

它確定，但如何在cavas中繪製多種形狀的三角形。 – pram

+0

檢查下面的鏈接 [多個三角形]（https://jsfiddle.net/1pkwu28k/） –

+0

@pram - 要繪製多個三角形，取這個答案中顯示的代碼並重復它，或將它放在一個循環中繪製爲無論你喜歡什麼座標，你都喜歡許多三角形。 – nnnnnn

1 

<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
     
 
     <style> 
 
     #test { 
 
      width: 100px; 
 
      height:100px; 
 
      margin: 0px auto; 
 
     } 
 
     </style> 
 
     
 
     <script type="text/javascript"> 
 
     function drawShape(){ 
 
      var canvas = document.getElementById('mycanvas'); 
 
      
 
      if (canvas.getContext){ 
 
      
 
       var ctx = canvas.getContext('2d'); 
 
      
 
       ctx.beginPath(); 
 
       ctx.moveTo(25,25); 
 
       ctx.lineTo(105,25); 
 
       ctx.lineTo(25,105); 
 
       ctx.fill(); 
 
      
 
       ctx.beginPath(); 
 
       ctx.moveTo(125,125); 
 
       ctx.lineTo(125,45); 
 
       ctx.lineTo(45,125); 
 
       ctx.closePath(); 
 
       ctx.stroke(); 
 
      } 
 
} 
 
      
 
     </script> 
 
    </head> 
 
    
 
    <body id="test" onload="drawShape();"> 
 
     <canvas id="mycanvas"></canvas> 
 
    </body> 
 
    
 
</html>

來源

2016-09-06 06:10:20 Gowtham

+0

它確定，但如何在三角形中繪製多個形狀，我添加了顯示的CSS編碼結果。該模態如何畫請幫助我。 – pram

+0

我想單頁顯示三個三角形的形狀。如何在該方法中畫布編程。 – pram

1 

function draw() { 
 
    var canvas = document.getElementById('canvas'); 
 
    if (canvas.getContext){ 
 
    var ctx = canvas.getContext('2d'); 
 

 
    ctx.beginPath(); 
 
    ctx.moveTo(75,50); 
 
    ctx.lineTo(100,75); 
 
    ctx.lineTo(100,25); 
 
    ctx.fill(); 
 
    } 
 
}
<html> 
 
 <body onload="draw();"> 
 
   <canvas id="canvas" width="100" height="100"></canvas> 
 
 </body> 
 
</html>

您可以reffer以下artice- Drawing shapes in canvas.

來源

2016-09-06 06:11:16 SreYash

+0

我需要三個三角形單頁。 – pram

 相關問題

  • 暫無相關問題^_^