以下使用 Canvas 绘制渐变色立方体的示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Gradient Cube</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 绘制立方体的六个面
drawFace(100, 100, 100, 200, 200, 200, "#ff0000", "#00ff00", "#0000ff"); // 前面
drawFace(0, 100, 100, 100, 200, 200, "#0000ff", "#00ff00", "#ff0000"); // 左面
drawFace(200, 100, 100, 300, 200, 200, "#00ff00", "#0000ff", "#ff0000"); // 右面
drawFace(100, 0, 100, 200, 100, 200, "#ff0000", "#0000ff", "#00ff00"); // 上面
drawFace(100, 200, 100, 200, 300, 200, "#ff0000", "#00ff00", "#0000ff"); // 下面
drawFace(100, 100, 0, 200, 200, 100, "#00ff00", "#ff0000", "#0000ff"); // 后面
// 绘制一个立方体面
function drawFace(x1, y1, z1, x2, y2, z2, color1, color2, color3) {
// 计算面的中心点
var centerX = (x1 + x2) / 2;
var centerY = (y1 + y2) / 2;
var centerZ = (z1 + z2) / 2;
// 开始绘制面
context.beginPath();
// 绘制面的左下角点
context.moveTo(projectX(x1, z1), projectY(y1, z1));
// 绘制面的其它三个点
context.lineTo(projectX(x2, z1), projectY(y1, z1));
context.lineTo(projectX(x2, z2), projectY(y2, z2));
context.lineTo(projectX(x1, z2), projectY(y2, z2));
// 使用渐变色填充面
var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, color1);
gradient.addColorStop(0.5, color2);
gradient.addColorStop(1, color3);
context.fillStyle = gradient;
context.fill();
// 结束绘制面
context.closePath();
}
// 将 3D 坐标投影到 2D 平面上
function projectX(x, z) {
return canvas.width / 2 + (x - canvas.width / 2) * (200 / (200 - z));
}
function projectY(y, z) {
return canvas.height / 2 - (y - canvas.height / 2) * (200 / (200 - z));
}
</script>
</body>
</html>
```
上述代码使用了三个颜色值，可以根据需要进行调整。同时，也可以根据需要修改立方体的大小和位置。
2606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
