0

再会。
我正在寻求建议。在判断之前，请注意我是编码新手，只有几周的经验。我正在尝试使用 JavaScript 将我绘制到画布上的云形状动画化。（请参阅下面我想要实现的动画类型的链接。）我到处搜索如何实现这一点，但似乎所有链接都处理实际图像或矩形，而不是自定义绘制的形状. 所以我的问题是，是否可以在自定义形状上制作这样的动画，如果没有，实现上述预期效果的最佳方法是什么。

<!DOCTYPE HTML>
<HTML>
  <head>
    <style>
      body {
        margin: 100px;
        padding: 0px;
        }
    </style>
  </head>
<body>
  <canvas id="Canvas" width="700" height="600" style="border:1px solid #005BAB;"></canvas>
    <script>
    var canvas = document.getElementById('Canvas');
    var context = canvas.getContext('2d');

    // gradients
    var grd = context.createRadialGradient(550, 150, 25, 500, 200, 400);
    grd.addColorStop (0, '#0586f8');
    grd.addColorStop (1, '#015baa');

      // blue block shadow
    context.shadowColor = '#999';
    context.shadowBlur = 35;
    context.shadowOffsetX = 8;
    context.shadowOffsetY = 8;
    context.globalCompositeOperation = 'source-over';
    context.beginPath();
    context.fill();

      // blue block
    context.beginPath();
    context.moveTo(50, 35);
    context.lineTo(50, 525);
    context.lineTo(550, 525);
    context.lineTo(550, 35);
    context.closePath();
    context.lineWidth = 0;
    context.strokeStyle = '#999';
    context.fillStyle = grd;
    context.fill();

        // cloud shadow
      context.shadowColor = '#232323';
      context.shadowBlur = 20;
      context.shadowOffsetX = 0;
      context.shadowOffsetY = 0;
      context.beginPath();
      context.globalAlpha = 0.9;
      context.fill();

        // cloud drawing
      context.beginPath();
      context.moveTo(172, 180);
      context.bezierCurveTo(145, 180, 120, 234, 185, 240);
      context.lineTo(375, 240);
      context.bezierCurveTo(495, 234, 405, 110, 382, 168);
      context.bezierCurveTo(440, 85, 280, 60, 325, 120);
      context.bezierCurveTo(320, 42, 190, 60, 200, 120);
      context.bezierCurveTo(120, 100, 140, 200, 170, 180);
      context.lineWidth = 1;
      context.fillStyle = 'white';
      context.fill();
      context.strokeStyle();
      context.lineCap = 'round';
      context.lineJoin = 'round';
      context.stroke();
    </script>
</body>
</HTML>

http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/

4

1 回答 1

0

您可以使用 javascript 创建另一个画布：

var cloud = document.createElement('canvas');
cloud.width = <width of the cloud>;
cloud.height = <height of the cloud>;

然后把你的云画到画布上。您应该调整坐标，使云边界框的左上角位于点 (0, 0)。这样，云画布就只有它需要的那么大了。

然后，您可以像对待图像一样对待您的云。

context.drawImage(cloud, 0, 0);
于 2013-06-06T12:38:59.520 回答