html5曲線の描画

html5で曲線を描画する方法を紹介します。

新しい知識はないので、ただCanvas描画APIの紹介です。

サンプル：
http://html5next.appspot.com/curves1.html

ソース：
<script type="text/javascript">
function formload()
{
 try
 {
  var objCanvas = document.getElementById("cvs01");
  var context = objCanvas.getContext("2d");

  // Save the canvas state and draw the path
  context.save(); 
  context.translate(-10, 350);
  context.beginPath(); 
  // The first curve bends up and right
  context.moveTo(0, 0);
  context.quadraticCurveTo(170, -50, 260, -190); 
  // The second curve continues down and right
  context.quadraticCurveTo(310, -250, 410,-250); 
  // Draw the path in a wide brown stroke
  context.strokeStyle = '#663300';
  context.lineWidth = 20;
  context.stroke(); 
  // Restore the previous canvas state
  context.restore();  
 }
 catch(e)
 {
  alert(e.description);
 }
}
</script>