HTML5画布(基础篇11-10)

 <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>

对于画圆角矩形而言:arcTo()的5个参数分别代表 A点的坐标 B的坐标 以及半径