Question

int

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;
}

我在三角形形状计算器中有一些代码，用于生成用于绘制三角形形状的CSS代码。但我想用canvas方法在三角形中绘制不同的形状。如何将CSS中的编程代码更改为画布？

Answer 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();

Answer 2

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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();
  }
}

＆＃13;

<html>
 <body onload="draw();">
   <canvas id="canvas" width="100" height="100"></canvas>
 </body>
</html>

＆＃13;

您可以遵循artice - Drawing shapes in canvas.

如何使用画布在单页中绘制三角形？

3 个答案: