สร้างแอนิเมชันพื้นฐานด้วย HTML5 Canvas

HTML5 Canvas มีเมธอดที่จำเป็นสำหรับวาดภาพและลบภาพออกได้อย่างสมบูรณ์ เราสามารถใช้ JavaScript ช่วยจำลองแอนิเมชันที่ดีบน HTML5 Canvas ได้

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อทำแอนิเมชันพื้นฐานกับ HTML5 Canvas:

<!DOCTYPE HTML>
<html>
  <head>
    <script>
      var pattern = new Image();
      function animate() {
        pattern.src = '/html5/images/pattern.jpg';
        setInterval(drawShape, 100);
      }
      function drawShape() {
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
          ctx.fillStyle = 'rgba(0,0,0,0.4)';
          ctx.strokeStyle = 'rgba(0,153,255,0.4)';
          ctx.save();
          ctx.translate(150, 150);
          var time = new Date();
          ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
          ctx.translate(0, 28.5);
          ctx.drawImage(pattern, -3.5, -3.5);
          ctx.restore();
        } else {
          alert('คุณต้องใช้ Safari หรือ Firefox 1.5+ เพื่อดูตัวอย่างนี้');
        }
      }
    </script>
  </head>
  <body onload="animate();">
    <canvas id="mycanvas" width="400" height="400"></canvas>
  </body>
</html>