HTML 5使用画布

问题描述 投票：-2回答：1

unction calculate() {
var base = document.getElementById("base1").value;
var height = document.getElementById("altura").value;
 var base1=  document.getElementById("base1").value;
var height1 =  document.getElementById("height1").value;
 
  var area = base * height / 2;
  document.getElementById("area").innerHTML = area;
  
}


var ctx = document.getElementById("canvas").getContext("2d");

var base = base1 * 100; 
var height = height1* 100; 
ctx.moveTo(0, 0);
ctx.lineTo(base, 0); 

ctx.moveTo(base, 0); 
ctx.lineTo(base / 2, height);

ctx.moveTo(base / 2, height);
ctx.lineTo(0, 0);
ctx.stroke(); 
<!DOCTYPE html>
<html>
  <head>
    <title>Triangle</title>
  </head>
  <body>
   <!-- This is the HTML5 canvas. We need to specify the its width and height but feel free to change them -->
 <canvas id="canvas" width=400 height=300></canvas>
<input id="base1" placeholder="Input base1 length">
<input id="height1" placeholder="Input height1 length">
<button type="button" id="submit" onclick="calculate()">Calculate</button>
   <p>The area is <span id="area"></span></p>
    
 </body>
</html>

我有一个问题，我正在建立一个网站，我需要根据方程Area = bh/2来表示一个三角形的区域我正在尝试使用画布生成形状，我一直在寻找一段代码我可以使用，但到目前为止没有。

到目前为止，我创建了3个变量。

var base

var height

我使用画布将这个2 var与三角形分开绘制 - 但是在这个页面上，用户应该通过输入他想要计算的数字填写基数和高度，我还没有找到一种方法来关联这些想法围绕这个。

请帮忙。

javascript html5 canvas
1个回答
1
投票

要使用HTML5画布，您需要先在HTML代码中创建一个canvas元素，然后使用document.getElementById（）在JS代码中获取它。

然后，您需要使用canvas.getContext("2d")获取对2d上下文的引用，以便您可以使用它在画布上绘制。然后使用以下函数定义三角形路径：ctx.moveTo()和ctx.lineTo()。

我建议你在这里阅读：https://www.w3schools.com/html/html5_canvas.asp或者这里：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

无论如何，以下代码可能适合您的需求：

var ctx = document.getElementById("canvas").getContext("2d"); // Get the 2d context which we will use for drawing

var base = 100; // Your base length
var height = 100; // Your height length

//TIP: I suggest multiplying them by some variable so that they look bigger

ctx.moveTo(0, 0); // This methods move an imaginary "pen" to the location 0, 0
ctx.lineTo(base, 0); // And this method moves that imaginary "pen" to the location base, 0 while also creating a line between those points.

ctx.moveTo(base, 0); // We start the next line at the end of the base
ctx.lineTo(base / 2, height); // And we finish it at the middle point of the base but height pixels below it and that's why the triangle will be isosceles triangle(2 of its sides will be equal)

ctx.moveTo(base / 2, height); // And the final line begins and the end of the previous
ctx.lineTo(0, 0); // And ends in the beggining of the first

// Basically we define a path from (0, 0) to (base, 0) to (base / 2, height) to (0, 0) which closes your triangle 

ctx.stroke(); // This method colors the path so that the triangle won't appear white
<!DOCTYPE html>
<html>
  <head>
    <title>Triangle</title>
  </head>
  <body>
    <!-- This is the HTML5 canvas. We need to specify the its width and height but feel free to change them -->
    <canvas id="canvas" width=400 height=300></canvas>
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.