如何使用HTML5中canvas绘制一个立体金字塔图形？（javascript可以）

需求需要做一个如下图的金字塔，上面的字就不需要了，只建好金字塔的模型即可。现我已经用HTML5建好一个三角形，求给个完成金字塔的思路，若有代码就更好了.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>MYJZT</title>
<body onload="draw('canvas')">
<div style="text-align:center;">
<canvas id="myCanvas" width="400" height="500" solid #c3c3c3;"></canvas>
<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle="black";
cxt.beginPath();
cxt.moveTo(200,0);
cxt.lineTo(0,400);
cxt.lineTo(400,400);
cxt.lineTo(200,0);

cxt.moveto(150,50);
cxt.line(50,200);

cxt.closePath();
cxt.stroke();

</script>
</body>
</head>
</html>
这些代码是我绘制三角形的。

举报该问题

其他回答

第1个回答 2013-03-01

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>MYJZT</title>
<body onload="draw('canvas')">
<div style="text-align:center;">
<canvas id="myCanvas" width="400" height="500" solid #c3c3c3;"></canvas>
<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle="black";
cxt.beginPath();
cxt.moveTo(200,0);
cxt.lineTo(0,400);
cxt.lineTo(400,400);
cxt.lineTo(200,0);

cxt.moveTo(200,0);
cxt.lineTo(50,200);
cxt.lineTo(0,400);

cxt.moveTo(200,0);
cxt.lineTo(350,200);
cxt.lineTo(400,400);

cxt.closePath();
cxt.stroke();

</script>
</body>
</head>
</html>本回答被网友采纳

第2个回答 2012-02-11

在右边在绘制一条直线，角度和右边的棱大约25°，要稍微短一些，然后连接

相似回答

大家正在搜