我正在做一个 BE 最后一年的项目，所以我需要你的帮助。 如何在 Canvas 上使用 javascript 为圆锥体或圆柱体提供 3d 效果？以及如何在其中填充所需的颜色，以便即使对象被旋转、移位或缩放也能保持相同的 3D 效果？
最佳答案
可以使用 4 档梯度模拟圆柱体的 3D 效果。
例如，如果你想要一个红色的圆柱体，你可以这样做:
- 红色
- 淡红色
- 红色
- 深红色
- 红色
人们可能会稍微调整这些比率，但上面列出的内容会给您带来预期的效果。显然，梯度的方向必须垂直于圆柱体的长度。
您可以使用 xColor JS 库之类的东西来获得更亮和更暗的颜色。
所以你会有这样的东西:
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var x1 = 0, x2 = 20, y1 = 0, y2 = 100;
var lingrad = ctx.createLinearGradient(x1,y1,x2,y1);
lingrad.addColorStop(0, 'red');
lingrad.addColorStop(0.25, $.xcolor.lighten('red', 1));
lingrad.addColorStop(0.5, 'red');
lingrad.addColorStop(0.75, $.xcolor.darken('red', 1));
lingrad.addColorStop(1, 'red');
ctx.fillStyle = lingrad;
ctx.fillRect(x1,y1,x2-x1,y2-y1);
}
我很确定轮换适用于所有内容，因此除了一个警告外，您不必担心这一点。这种错觉依赖于我们倾向于期望物体从上方被照亮的想法(可能是天空中那个大火球)。因此，一旦旋转超出垂直方向，您可能需要反转渐变。虽然效果可能很刺耳。
试一试。
更新:这是为了演示 - 希望对您有所帮助
var context = document.getElementById('canvas').getContext('2d');
var cylinder = {width: 30, height: 100};
var x = -cylinder.width / 2;
var y = -cylinder.height / 2;
var baseColor = "#c00";
var tick = 0;
function draw() {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.save();
context.translate(context.canvas.width / 2, context.canvas.height / 2);
var gradient = context.createLinearGradient(x, y, x + cylinder.width, y);
gradient.addColorStop(0, baseColor);
gradient.addColorStop(0.25, $.xcolor.lighten(baseColor, 1));
gradient.addColorStop(0.5, baseColor);
gradient.addColorStop(0.75, $.xcolor.darken(baseColor, 0.5));
gradient.addColorStop(1, baseColor);
context.rotate(tick++ / 180 * Math.PI);
context.fillStyle = gradient;
context.fillRect(x, y, cylinder.width, cylinder.height);
context.restore();
console.log("Tick");
}
setInterval(draw, 1000 / 20);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgithub.com/infusion/jQuery-xcolor/master/jquery.xcolor.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Cylinder effect</title>
<script src="/javascripts/jquery-1.5.1.js"></script>
<script src="/javascripts/jquery.xcolor.js"></script>
</head>
<body>
<div style="margin-left:auto;margin-right:auto;margin-top: 100px;width:640px;height:480px;border:1px solid gray">
<canvas id="canvas" width="640" height="480"></canvas>
</div>
</body>
</html>关于javascript - 如何在 Canvas 上使用 javascript 为圆锥体或圆柱体提供 3d 效果？以及如何在其中填充所需的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5362047/