canvas几种(凸轮机动画，太阳地球月球联动旋转，正弦曲线动画)简单效果

本文通过HTML5 Canvas展示了三种动画效果：凸轮机动画，太阳、地球和月球的联动旋转，以及动态正弦曲线。通过JavaScript实现这些动画，详细代码已给出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
   <title>canvas测试</title>
   <style type="text/css">
       .canvas {
           background-color: #ccc;
           /*width: 800px;
           height: 400px;*/
       }

</style>
</head>
<body>
<canvas class="canvas" id="canvas"></canvas>

function getCanvasContext(id) {
   let canvas = document.getElementById(id);
   canvas.width = (document.documentElement.clientWidth || document.body.clientWidth) - 50
   canvas.height = (document.documentElement.clientHeight || document.body.clientHeight) -50
   return canvas.getContext('2d')
}

function drawCircle(canvas, rx, ry, r, color = "#f00") {
   canvas.arc(rx, ry, 20, 0, Math.PI, true);
   canvas.fillStyle = color;
   canvas.fill();
}

!(function() {

   let canvas = getCanvasContext('canvas');
   canvas.translate(400,250);
   var interval = null;
   var x = 0, y = 0;
   canvas.strokeStyle = "#f00"
   canvas.fillStyle = "#f00";

   /**
   * 画凸轮机
   */
   const p = Math.PI ;
   canvas.beginPath();
   var s = canvas.createLinearGradient(-100,0,100,0);
   s.addColorStop(0, 'red');
   s.addColorStop(0.5, 'green');
   s.addColorStop(1, 'blue');
   canvas.fillStyle = s;
   canvas.arc(0, 0, 100, 0, 2*p, true);
   canvas.fill();

var i = 0;

interval = setInterval(function() {

canvas.clearRect(-1000, -1000, 2000, 2000);

       canvas.save();
           canvas.fillStyle = '#0f0'
           canvas.setTransform(1, 0, 0, 1, 0, 0);
           canvas.fillRect(50, 30, 100, 60);
       canvas.restore();

       canvas.save();
           canvas.rotate(i)
           canvas.beginPath();
           canvas.fillStyle = s;
           canvas.arc(0, 0, 80, 0, 2*p, true);
           canvas.fill();
           canvas.beginPath();
           canvas.fillStyle = "red"
           canvas.fillRect(-10, -10, 160, 20);

           canvas.save();
               canvas.translate(140, 0);
               canvas.rotate(i*0.5)
               canvas.beginPath();
               canvas.fillStyle = "green"
               canvas.fillRect(-7, -7, 100, 14);

               canvas.save();
                   canvas.translate(86, 0);
                   canvas.beginPath();
                   canvas.moveTo(0, 0);
                   canvas.setTransform(1, 0, 0, 1, 0, 0);
                   canvas.lineTo(100, 60);
                   canvas.stroke();
               canvas.restore();

canvas.restore();

       canvas.restore();
       i = i + p/180 * 10;
       if (i >= 200000*p) {
           i = 0;
       }

},170);

   /**
   * 画凸轮机结束
   */

   /**
   * 画太阳地球月亮联动转动
   */

// var i = 0;
// interval = setInterval(function() {

   //     canvas.clearRect(-300, -300, 600, 600);
   //     canvas.beginPath();
   //     canvas.arc(0, 0, 40, 0, 2*Math.PI);
   //    canvas.fill();
   //     canvas.save();

   //       canvas.beginPath();
   //       canvas.translate(150 * Math.cos(i), 150 * Math.sin(i));
   //        canvas.arc(0, 0, 20, 0, 2*Math.PI);
   //        canvas.fill();

   //        canvas.save();
   //            canvas.beginPath();
   //            canvas.rotate(i*2);
   //            canvas.translate(50 * Math.cos(i), 40 * Math.sin(i));
   //            canvas.arc(0, 0, 10, 0, 2*Math.PI);
   //            canvas.fill();
   //        canvas.restore();

   //    canvas.restore();
   //    i = i + 0.02 * Math.PI;
   //    if (i >= 2*Math.PI) {
   //        i = 0;
   //    }
   // }, 100);

   /**
   * 画太阳地球月亮联动转动结束
   */

   /**
   * 画正弦曲线动画
   */

   // canvas.beginPath();
   // canvas.moveTo(0, -200);
   // canvas.lineTo(0, 0);
   // canvas.lineTo(700, 0);
   // canvas.stroke();

   // canvas.beginPath();
   // canvas.moveTo(10, -180);
   // canvas.lineTo(0, -200);
   // canvas.lineTo(-10, -180);
   // canvas.stroke();

   // canvas.beginPath();
   // canvas.moveTo(680, -10);
   // canvas.lineTo(700, 0);
   // canvas.lineTo(680, 10);
   // canvas.stroke();

   // canvas.font = "24px Arial";
   // canvas.fillText("0",-20, 20);
   // canvas.fillText("X", 680, -25);
   // canvas.fillText("Y", 25, -180);

   // canvas.fillText("PI", 50*Math.PI, 25);
   // canvas.fillText("2PI", 100*Math.PI, 25);
   // canvas.fillText("3PI", 150*Math.PI, 25);
   // canvas.fillText("4PI", 200*Math.PI, 25);

   // canvas.lineWidth = 1;
   // canvas.beginPath();
   // canvas.moveTo(0, 0);
   // interval = setInterval(function() {
   //    y = -Math.sin(0.02*x) * 60;
   //    canvas.lineTo(x, y);
   //    canvas.stroke();
   //    if (x >= Math.PI * 200) {clearInterval(interval);}
   //    x = x + 30 * Math.PI / 180;
   // },17);


   /**
   * 画正弦曲线动画结束
   */