如何使用HTML5中canvas绘制一个立体金字塔图形？（javascript可以） 10
需求需要做一个如下图的金字塔，上面的字就不需要了，只建好金字塔的模型即可。现我已经用HTML5建好一个三角形，求给个完成金字塔的思路，若有代码就更好了.<html><he...
需求需要做一个如下图的金字塔，上面的字就不需要了，只建好金字塔的模型即可。现我已经用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>
这些代码是我绘制三角形的。 展开
<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>
这些代码是我绘制三角形的。 展开
2个回答
展开全部
<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>
<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>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
AiPPT
2024-09-19 广告
随着AI技术的飞速发展，如今市面上涌现了许多实用易操作的AI生成工具1、简介：AiPPT: 这款AI工具智能理解用户输入的主题，提供“AI智能生成”和“导入本地大纲”的选项，生成的PPT内容丰富多样，可自由编辑和添加元素，图表类型包括柱状图...
点击进入详情页
本回答由AiPPT提供
展开全部
在右边在绘制一条直线，角度和右边的棱大约25°，要稍微短一些，然后连接
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
