如何使用画布在单页中绘制三个三角形？ [英] How to draw the three triangle in single page using canvas?
本文介绍了如何使用画布在单页中绘制三个三角形？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
function areaval（）{var equation = $（'＃number'）。 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> A =+ d + 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> 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> 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> 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 =角度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> 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> 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;顶部：calc（8％）;左：calc（3％）; width：300px; height：500px; }＃equilateral-try：after {width：100％;高度：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;左：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％;左：45％; }＃coverbox11 {position：absolute;顶部：calc（8％）;左：calc（30％）; width：300px; height：500px; }＃right-try：after {width：100％;身高：100％;含量：; 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;顶部：calc（8％）;左：calc（65％）; width：300px; height：500px; }＃obtuse-try：after {width：100％;高度：100％; content：; border-bottom：80px solid #fff; border-left：120px solid transparent; position：absolute; top：14px; left：-125px; z-index：8;}＃strightline3 {position：absolute;左：68.8％; top：16％; z-index：9;}
< html& ; head>< script src =angleoftriangle.js>< / script>< link rel =stylesheettype =text / csshref =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 =textonsubmit =return areaval（）>< p id =heading1style =绝对;顶部：8％;左：20％;字体大小：22px;颜色：黑色>急性三角形< / p>< p id =heading5style = ; left：20％; font-size：20px; color：black;> abc< 90deg。< / p>< input type =textvalue =id =numberstyle =绝对宽度：8％;高度：4％;左侧：60％;顶部：40％;轮廓：无边框：无; font-size：25px; background-color：transparent; placeholder =brequired>< input type =textvalue =id =acurestyle =position：absolute; width：8％; height：4％; left：78％; top：31％ ; outline：none; border：none; font-size：25px; z-index：4; background-color：transparent; placeholder =hrequired>< input type =textvalue =id =pmetstyle =position：absolute; width：8％; height：4％; left：42％; top：25％ ; outline：none; border：none; font-size：25px; z-index：6; background-color：transparent; placeholder =arequired>< input type =textvalue =id =cmetstyle =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必需>< / style>< / style>< div id = resultstyle =position：absolute; top：55％; left：20％; font-size：20px; color：＃878787;>< / div>< div id =step4.1style = position：absolute; top：60％; left：20％; font-size：20px; color：＃878787;>< / div>< div id =result2.2style = ; top：68％; left：20％; font-size：20px; color：＃878787;>< / div>< div id =step4.6style =position：absolute; top：73 ％; left：20％; font-size：20px; color：＃878787;>< / div>< svg height =16％width =14％id =strightline> < line x1 =30y1 =0x2 =30y2 =105style =stroke：black; stroke-width：2/>< / svg>< / div>< ; div id =coverbox11>< div id =right-try>< / div>< form id =text1onsubmit =return rightang（）>< p id = heading1style =position：absolute; top：7％; left：32％; font-size：22px; color：black;> Rightangle Triangle< / p>< p id =heading5style = ：absolute; top：42％; left：43％; font-size：20px; color：black;> < / p>< input type =textvalue =id =oppsitestyle =position：absolute; width：8％; height：4％; left：38％; top： 23％; outline：none; border：none; font-size：25px; background-color：transparent; placeholder =arequired>< input type =textvalue =id =hidgtstyle =position：absolute; width：8％; height：4％; left：48％; top：23％ ; outline：none; border：none; font-size：25px; z-index：20; background-color：transparent; placeholder =hrequired>< input type =textvalue =id =adjacentstyle =position：absolute; width：8％; height：4％; left：53％; top： ; outline：none; border：none; font-size：25px; z-index：4; background-color：transparent; placeholder =brequired>< input type =textvalue =id =hyperstyle =position：absolute; width：8％; height：4％; left：68％; top：23％ ; outline：none; border：none; font-size：25px; z-index：6; background-color：transparent; placeholder =crequired>< / style>< div style =button style =position：absolute; height：20px; left：64％; top：38％; raitresultstyle =position：absolute; top：55％; left：43％; font-size：20px; color：＃878787;>< / div>< div id =step5.1style = position：absolute; top：60％; left：43％; font-size：20px; color：＃878787;>< / div>< div id =periresult2style =position：absolute; top ：70％; left：43％; font-size：20px; color：＃878787;>< / div>< div id =step5.5style =position：absolute; top：75％ left：43％; font-size：20px; color：＃878787;>< / div>< div id =periresult3style =position：absolute; top：85％; left：43％ -size：20px; color：＃878787;>< / div>< div id =step5.8style =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 =lineABd =M 100 150 l 70 -200stroke =blackstroke-width = =none/>< / svg>< form id =text2onsubmit =return obtuseang（）>< p id =heading16style =position：absolute; top：8％ left：20％; font-size：22px; color：black;> Obtuse Triangle< / p>< p id =heading17style =position：absolute; top：42％; left：30％ < / p>< input type =textvalue =id =oppsite1style =position：absolute; width：8％; height：4％; left：48％; top：38％; outline：none; border：none; font-size：25px; background-color：transparent; placeholder =brequired>< input type =textvalue =id =oppsite2style =position：absolute; width：8％; height：4％; left：58％; top：28％ ; outline：none; border：none; font-size：25px; z-index：16; background-color：transparent; placeholder =hrequired>< input type =textvalue =id =oppsite6style =position：absolute; width：8％; height：4％; left：71％; top：23％ ; outline：none; border：none; font-size：25px; z-index：16; background-color：transparent; placeholder =crequired>< input type =textvalue =id =oppsite7style =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必需>< / button>< / form>< div id = raitresult43style =position：absolute; top：55％; left：30％; font-size：20px; color：＃878787;>< / div>< div id =step6.1style = position：absolute; top：60％; left：30％; font-size：20px; color：＃878787;>< / div>< div id =obtuseresultstyle = ：70％; left：30％; font-size：20px; color：＃878787;>< / div>< div id =stepfinestyle =position：absolute; top：75％ 30％; font-size：20px; color：＃878787;>< / div>< / div>< p id =heading19style =position：absolute; top：-1％ < / body>< / html>
我在三角形形状计算器中有一些代码，使用css代码绘制三角形。但我想要绘制不同的形状在三角形使用canvas方法如何改变编程代码在css到canvas.please帮助我..
谢谢。
解决方案
lang =jsdata-hide =falsedata-console =truedata-babel =false>
`Try this
Html：
<！DOCTYPE html>
< html>
< head>
< title>三角画布示例< / title>
< / head>
< body>
< canvas id =myCanvaswidth =500height =500>< / canvas>
< / body>
< / html>
javascript：
code> var canvasElement = document.querySelector（＃myCanvas）;
var context = canvasElement.getContext（2d）;
//三角形
context.beginPath（）;
context.moveTo（100，100）;
context.lineTo（100，300）;
context.lineTo（300，300）;
context.closePath（）;
//大纲
context.lineWidth = 10;
context.strokeStyle ='＃666666';
context.stroke（）;
//填充颜色
context.fillStyle =＃FFCC00;
context.fill（）;
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>
I have some code in triangle shape calculator in that code css coding using to draw the triangle shape. but i want the draw the different shapes in triangle using canvas method How to change the programming code in css to canvas.please help me.. Thank you.
解决方案
`
<!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>
`Try this
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();
这篇关于如何使用画布在单页中绘制三个三角形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
