如何使用畫布在單個頁面上繪制三個三角形？
[英]How to draw the three triangle in single page using canvas?
問題描述
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; } #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中的編程代碼更改為canvas？
3 個解決方案
解決方案1
1 2016-09-06 06:04:34
`
<!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();
解決方案2
1 2016-09-06 06:10:20
<!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>
解決方案3
1 2016-09-06 06:11:16
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>
您可以參考以下artice- 在畫布中繪制形狀。
如何使用 canvas JavaScript 在圖像的 4 個角上繪制三角形
[英]How can I draw triangle on 4 corner of image using canvas JavaScript
如何通過使用HTML Canvas連接位於等邊三角形三邊的三個坐標來查找坐標
[英]How to find a coordinate by connecting the three coordinates lie on three sides of an equilateral triangle using HTML Canvas
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.