Question

美好的一天我正在寻找建议。在评判之前，请注意我是编码的新手，只有几周的经验。我正在尝试使用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/

Answer 1

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

Canvas上的Animate（Oscillation）自定义绘制形状

1 个答案: