如何在画布上使用javascript为圆锥体或圆柱体提供3d效果？以及如何在它们中填充所需的颜色？_Javascript_Html

如何在画布上使用javascript为圆锥体或圆柱体提供3d效果？以及如何在它们中填充所需的颜色？

javascript html

如何在画布上使用javascript为圆锥体或圆柱体提供3d效果？以及如何在它们中填充所需的颜色？,javascript,html,Javascript,Html,我正在做一个最后一年的项目，所以我需要你的帮助。如何在画布上使用javascript为圆锥体或圆柱体提供3d效果？以及如何在其中填充所需的颜色，以便即使对象旋转、移动或缩放，也能保持相同的3D效果？可以使用4个停止梯度模拟圆柱体的3D效果例如，如果想要红色圆柱体，可以执行以下操作：红色的浅红色红色的深红色红色的人们可能会在一定程度上调整这些比率，但上面列出的内容会给你想要的效果。显然，梯度的方向必须垂直于圆柱体的长度您可以使用xColor JS库之类的工具来获得更亮和更暗的

我正在做一个最后一年的项目，所以我需要你的帮助。

如何在画布上使用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);
}

我很确定轮换将适用于所有事情，所以你不必担心，除了一个警告。这种错觉依赖于这样一种想法，即我们倾向于期望物体从上方被照亮（可能是天空中的那个大火球）。因此，一旦旋转超过垂直方向，可能需要反转渐变。不过，这种影响可能会令人不安

试试看

更新：这样做是为了演示-希望有帮助

<!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>
<script type="text/javascript">

    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>

</body>
</html>


圆柱效应
var context=document.getElementById（'canvas'）.getContext（'2d'）；
var圆柱体={宽度：30，高度：100}；
var x=-cylinder.width/2；
变量y=-气缸高度/2；
var baseColor=“#c00”；
var tick=0；
函数绘图（）{
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+圆柱体宽度，y）；
渐变。添加颜色停止（0，基色）；
渐变。添加颜色停止（0.25，$.xcolor。变亮（基色，1））；
渐变。添加颜色停止（0.5，基色）；
渐变。添加颜色停止（0.75，$.xcolor。变暗（基色，0.5））；
渐变。添加颜色停止（1，基色）；
旋转（tick++/180*Math.PI）；
context.fillStyle=渐变；
context.fillRect（x，y，圆柱体.width，圆柱体.height）；
restore（）；
控制台日志（“勾选”）；
}
设置间隔（绘图，1000/20）；

圆柱体的3D效果可以使用4个停止梯度进行模拟

例如，如果想要红色圆柱体，可以执行以下操作：

红色的
浅红色
红色的
深红色
红色的

人们可能会在一定程度上调整这些比率，但上面列出的内容会给你想要的效果。显然，梯度的方向必须垂直于圆柱体的长度

您可以使用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);
}

试试看

更新：这样做是为了演示-希望有帮助

<!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>
<script type="text/javascript">

    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>

</body>
</html>


圆柱效应
var context=document.getElementById（'canvas'）.getContext（'2d'）；
var圆柱体={宽度：30，高度：100}；
var x=-cylinder.width/2；
变量y=-气缸高度/2；
var baseColor=“#c00”；
var tick=0；
函数绘图（）{
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+圆柱体宽度，y）；
渐变。添加颜色停止（0，基色）；
渐变。添加颜色停止（0.25，$.xcolor。变亮（基色，1））；
渐变。添加颜色停止（0.5，基色）；
渐变。添加颜色停止（0.75，$.xcolor。变暗（基色，0.5））；
渐变。添加颜色停止（1，基色）；
旋转（tick++/180*Math.PI）；
context.fillStyle=渐变；
context.fillRect（x，y，圆柱体.width，圆柱体.height）；
restore（）；
控制台日志（“勾选”）；
}
设置间隔（绘图，1000/20）；

thanx用于建议，但即使在链接到xColor.js之后，代码也不起作用……请建议为使其起作用而应做的必要更改。thanx用于建议，但代码在链接到xColor.js之后也不起作用……请建议为使其起作用而应做的必要更改。