还有没有其他办法，我这个感觉好麻烦
<!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>
正在回答 回答被采纳积分+1
- 参与学习 315 人
- 提交作业 136 份
- 解答问题 626 个
如果你有H5、CSS3、JS基础，热爱前端并希望在前端应用方面不断进步，那就来吧，本路径为你带来的课程有HTML5进阶、CSS3进阶、JS面向对象、jQ基础、Less等，助你进一步提升前端开发技能
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星