还有没有其他办法，我这个感觉好麻烦

来源：3-5 编程练习

纯情掉了一地

2018-03-29 14:29:43

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
* {
padding: 0;
margin: 0;
}

canvas {
border: 1px solid #ff7f50;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300">您的游览器不支持canvas</canvas>
<p id="msg1"></p>
<p id="msg2"></p>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var o1, o2, o3, o4, o5;

function Triangle(v1, v2, h) {
o1 = v1;
o2 = v2;
o4 = h + v2;
var x;
x = Math.sqrt(h * h / 3);
o3 = 150 - x;
o5 = 150 + x;
}

Triangle(150, 50, 200);

ctx.moveTo(o1, o2);
ctx.strokeStyle = "#ff5555";
ctx.lineTo(o3, o4);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(o3, o4);
ctx.lineTo(o5, o4);
ctx.strokeStyle = "yellow";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(o5, o4);
ctx.lineTo(o1, o2);
ctx.strokeStyle = "green";
ctx.stroke();

</script>
</body>
</html>