Sun. Aug 7th, 2022

HTML5 bertujuan untuk memperbaiki teknologi HTML terutama mendukung teknologi multimedia terkini, mudah dibaca dan mudah dimengerti oleh mesin.

Fitur HTM5
– Video dan Audio : tidak perlu menempelkan flash, quickplayer, atau realplayer untuk memutar audio dan video.
– Canvas : Media corat-coret langsung tanpa flash dan applet java.
– Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, dan search.
– Semantic: Mempermudah designer dengan tag khusus layout, seperti: artikel, footer, header, navigasi, dan section.
– Dukungan yang lebih baik untuk penyimpanan secara offline

contoh  tag membuat Canvas Draw a Line

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> </canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

</body>
</html>

Canvas Draw a Line (color)

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
context.beginPath();
      context.moveTo(100, 150);
      context.lineTo(450, 50);
      context.lineWidth = 10;

      // set line color
      context.strokeStyle = '#ff0000';
      context.stroke();
    </script>
  </body>
</html>

 Canvas Curve

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="250"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 75;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 1.9 * Math.PI;
      var counterClockwise = false;

 context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 15;

      // line color
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>

 Canvas Draw a Circle

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(80,50,40,0,2*Math.PI);
ctx.stroke();
</script> 

</body>
</html>

 Canvas Semicircle

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(288, 75, 70, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = 'red';
      context.fill();
      context.strokeStyle = '#550000';
      context.stroke();
    </script>
  </body>
</html>

 Canvas Draw a Text

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="100" style="border:1px solid #d3d3d3;">

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Semangat Mblo...",10,50);
</script>

</body>
</html>

 Canvas Draw a Text (Text Color)

<!DOCTYPE HTML>
<html>
  <head>
</head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.font = '40pt Calibri';
      context.fillStyle = 'blue';
      context.fillText('Semangat Mbloo', 150, 100);
    </script>
  </body>
</html> 

Canvas Draw a Text (Stroke Text)

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="100" style="border:1px solid #d3d3d3;">


<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Semangat Mblo...",10,50);
</script>

</body>
</html>

 Canvas Draw Linear Gradient

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"yellow");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

 Canvas Animation Frames 

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
      })();
function drawRectangle(myRectangle, context) {
        context.beginPath();
        context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
        context.fillStyle = '#8ED6FF';
        context.fill();
        context.lineWidth = myRectangle.borderWidth;
        context.strokeStyle = 'black';
        context.stroke();
      }
function animate(myRectangle, canvas, context, startTime) {
        // update
        var time = (new Date()).getTime() - startTime;

        var linearSpeed = 100;
        // pixels / second
        var newX = linearSpeed * time / 1000;

        if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
          myRectangle.x = newX;
        }

        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);

        drawRectangle(myRectangle, context);

        // request new frame
        requestAnimFrame(function() {
          animate(myRectangle, canvas, context, startTime);
        });
      }
var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var myRectangle = {
        x: 0,
        y: 75,
        width: 100,
        height: 50,
        borderWidth: 5
      };

      drawRectangle(myRectangle, context);

      // wait one second before starting animation
      setTimeout(function() {
        var startTime = (new Date()).getTime();
        animate(myRectangle, canvas, context, startTime);
      }, 1000);
    </script>
function animate(myRectangle, canvas, context, startTime) {
        // update
        var time = (new Date()).getTime() - startTime;

        var linearSpeed = 100;
        // pixels / second
        var newX = linearSpeed * time / 1000;

        if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
          myRectangle.x = newX;
        }

        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);

        drawRectangle(myRectangle, context);

        // request new frame
        requestAnimFrame(function() {
          animate(myRectangle, canvas, context, startTime);
        });
      }
var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var myRectangle = {
        x: 0,
        y: 75,
        width: 100,
        height: 50,
        borderWidth: 5
      };

      drawRectangle(myRectangle, context);

      // wait one second before starting animation
      setTimeout(function() {
        var startTime = (new Date()).getTime();
        animate(myRectangle, canvas, context, startTime);
      }, 1000);
    </script>
</body>
</html>

 Canvas Start and Stop an Animation

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
      })();
function drawRect(myRectangle, context) {
        context.beginPath();
        context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
        context.fillStyle = '#8ED6FF';
        context.fill();
        context.lineWidth = myRectangle.borderWidth;
        context.strokeStyle = 'black';
        context.stroke();
      }
function animate(lastTime, myRectangle, runAnimation, canvas, context) {
        if(runAnimation.value) {
          // update
          var time = (new Date()).getTime();
          var timeDiff = time - lastTime;
          // pixels / second
          var linearSpeed = 100;
          var linearDistEachFrame = linearSpeed * timeDiff / 1000;
          var currentX = myRectangle.x;

          if(currentX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
            var newX = currentX + linearDistEachFrame;
            myRectangle.x = newX;
          }
// clear
          context.clearRect(0, 0, canvas.width, canvas.height);
          // draw
          drawRect(myRectangle, context);
          // request new frame
          requestAnimFrame(function() {
            animate(time, myRectangle, runAnimation, canvas, context);
          });
        }
      }
var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var myRectangle = {
        x: 0,
        y: 75,
        width: 100,
        height: 50,
        borderWidth: 5
      };

      /*
       * define the runAnimation boolean as an obect
       * so that it can be modified by reference
       */
      var runAnimation = {
        value: false
      };
// add click listener to canvas
      document.getElementById('myCanvas').addEventListener('click', function() {
        // flip flag
        runAnimation.value = !runAnimation.value;

        if(runAnimation.value) {
          var date = new Date();
          var time = date.getTime();
          animate(time, myRectangle, runAnimation, canvas, context);
        }
      });
      drawRect(myRectangle, context);

    </script>
  </body>
</html>