<script type="text/javascript">

     $(function(){

         var s = $("#myCanvas")[0];

         var canvas = s.getContext("2d");

         //画直线

         canvas.strokeStyle = "#FF0000";

         canvas.moveTo(100,100);

         canvas.lineTo(300,400);

         canvas.stroke();

         canvas.beginPath();

         canvas.moveTo(100,100);

         canvas.lineTo(400,300);

         canvas.stroke();

     //2、画矩形

         var c = s.getContext("2d");

         //填充颜色

         c.fillStyle="blue";

         c.beginPath();

         //方式一（填充）

         c.fillRect(10,10,30,30);

         c.beginPath();

         //方式二（填充）

         c.rect(300,300,100,100);

         c.fill();

         c.beginPath();

         //线条颜色

         c.strokeStyle="yellow";

         c.strokeRect(50,50,30,30);

     //3、画圆

         c.beginPath();

         //线条宽度

         c.lineWidth = 3;

         //线条颜色

         c.strokeStyle="black";

         // 参数：  x,y,r,开始弧度,结束弧度,顺逆时针

         c.arc(200,200,30,0,360*Math.PI/180,false);

         //空心元

         c.stroke();

         //实心圆

         c.fill();

     //4、html5没有提供画圆角矩形API 但是通过arcTo方法可以实现这个效果

         c.beginPath();

         c.moveTo(200,200);

         c.lineTo(250,200);

         c.arcTo(300,200,300,250,30);

         c.lineTo(300,300);

         c.stroke();

     });

 </script>