Wednesday, March 25, 2015





<!DOCTYPE html>
<html>
<head>
<title>Shapes</title>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById('cloudCanvas');

var context = canvas.getContext('2d');

context.fillStyle = "#0CB7F2";      
        context.fillRect(0,0,canvas.width,canvas.height);


        context.beginPath();
      context.rect(0, 460, 500, 100);
  context.fillStyle = '#56b000';
      context.fill();
context.lineWidth = 0.001;
      context.strokeStyle = 'black';
  context.stroke();

  context.beginPath();
      context.moveTo(150, 450);
      context.lineTo(150,500);
      context.lineWidth = 20;
      context.strokeStyle = '#544d31';
      context.lineCap = 'round';
      context.stroke();


      context.beginPath();
      context.moveTo(170, 80);
      context.bezierCurveTo(130, 100, 130, 150, 230, 150);
      context.bezierCurveTo(250, 180, 320, 180, 340, 150);
      context.bezierCurveTo(420, 150, 420, 120, 390, 100);
      context.bezierCurveTo(430, 40, 370, 30, 340, 50);
      context.bezierCurveTo(320, 5, 250, 20, 250, 50);
      context.bezierCurveTo(200, 5, 150, 20, 170, 80);  
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.strokeStyle = 'white';
      context.stroke();

      context.beginPath();
      context.strokeStyle = 'black';
   context.arc(150,400,50,0,Math.PI*2,true); // Outer circle
   context.fillStyle = 'yellow';
   context.fill();
   context.strokeStyle = 'black';
   context.moveTo(185,410);
   context.arc(150,405,35,0,Math.PI,false);  // Mouth (clockwise)
   context.moveTo(130,390);
   context.arc(135,390,5,0,Math.PI*2,true);  // Left eye  
   context.moveTo(160,390);
   context.arc(167,390,5,0,Math.PI*2,true);  // Right eye
   context.stroke();
 
};

</script>
</head>
<body>
<canvas id="cloudCanvas" width="500" height="550" />
</body>
</html>

No comments:

Post a Comment