如何使用HTML5中canvas绘制一个立体金字塔图形？（javascript可以）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用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>
这些代码是我绘制三角形的。
<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> 参考技术B 在右边在绘制一条直线，角度和右边的棱大约25°，要稍微短一些，然后连接
canvas一周一练 -- canvas绘制立体文字
运行效果：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="drawing" width="800" height="600">A drawing of someing!</canvas>
<script type="text/javascript">
var drawing = document.getElementById(\'drawing\');
if(drawing.getContext) {
//绘制立体文字
var context = drawing.getContext(\'2d\');
context.fillStyle = \'Purple\';
context.textAlign = \'center\';
context.textBaseline = \'middle\';
context.font = \'bold 100px Arial\';
context.fillText(\'莫\', 290, 90);
context.globalAlpha = 0.7;
context.font = \'bold 80px Arial\';
context.fillText(\'欺\', 380, 90);
context.globalAlpha = 0.6;
context.font = \'bold 70px Arial\';
context.fillText(\'欺\', 205, 90);
context.globalAlpha = 0.6;
context.font = \'bold 60px Arial\';
context.fillText(\'少\', 450, 90);
context.globalAlpha = 0.5;
context.font = \'bold 60px Arial\';
context.fillText(\'少\', 140, 90);
context.globalAlpha = 0.5;
context.font = \'bold 40px Arial\';
context.fillText(\'年\', 500, 90);
context.globalAlpha = 0.4;
context.font = \'bold 40px Arial\';
context.fillText(\'年\', 95, 90);
context.globalAlpha = 0.4;
context.font = \'bold 20px Arial\';
context.fillText(\'穷\', 530, 90);
context.globalAlpha = 0.3;
context.font = \'bold 20px Arial\';
context.fillText(\'穷\', 65, 90);
context.globalAlpha = 0.3;
}
</script>
</body>
</html>
以上是关于如何使用HTML5中canvas绘制一个立体金字塔图形？（javascript可以）的主要内容，如果未能解决你的问题，请参考以下文章