canvas-绘制3D金字塔

var canvas1 = document.getElementById("canvas1");

var context = canvas1.getContext("2d");

canvas1.width = 400;

canvas1.height = 400;

context.beginPath();

context.moveTo(0, 360);

context.lineTo(200, 400);

context.lineTo(400, 360);

context.lineTo(350, 280);

context.lineTo(200, 310);

context.lineTo(50, 280);

context.lineTo(0, 360);

var grd1 = context.createLinearGradient(0, 360, 400, 360);

grd1.addColorStop(0, '#92f9cb');

grd1.addColorStop(1, '#1dc2fa');

context.fillStyle = grd1;

context.fill();

context.closePath();

context.beginPath();

context.moveTo(50, 260);

context.lineTo(200, 290);

context.lineTo(350, 260);

context.lineTo(300, 180);

context.lineTo(200, 200);

context.lineTo(100, 180);

context.lineTo(50, 260);

var grd1 = context.createLinearGradient(50, 260, 350, 260);

grd1.addColorStop(0, '#fa7198');

grd1.addColorStop(1, '#d5b73a');

context.fillStyle = grd1;

context.fill();

context.closePath();

context.beginPath();

context.moveTo(100, 160);

context.lineTo(200, 180);

context.lineTo(300, 160);

context.lineTo(250, 90);

context.lineTo(200, 100);

context.lineTo(150, 90);

context.lineTo(100, 160);

var grd1 = context.createLinearGradient(100, 160, 300, 160);

grd1.addColorStop(0, '#06f5ff');

grd1.addColorStop(1, '#052e79');

context.fillStyle = grd1;

context.fill();

context.closePath();

context.beginPath();

context.moveTo(150, 75);

context.lineTo(200, 85);

context.lineTo(250, 75);

context.lineTo(200,0);

context.lineTo(150, 75);

var grd1 = context.createLinearGradient(150, 75, 250, 75);

grd1.addColorStop(0, '#c524ff');

grd1.addColorStop(1, '#d6a6d9');

context.fillStyle = grd1;

context.fill();

context.closePath();

context.beginPath();

context.moveTo(200, 0);

context.lineTo(200, 400);

context.lineWidth = 0.3;

context.strokeStyle = "#051243";

context.stroke();

context.closePath();