js 利用canvas绘制直线、曲线 

<body>
   <!--画板-->
    // 当浏览器不支持的时候才会出现文字
   <canvas id="canvas" style="background-color: black;">您当前的版本不支持       </canvas>

   <script type="text/javascript">

       // 拿到画板
       var canvas = document.getElementById('canvas');
       canvas.width = 1000;
       canvas.height = 1000;

       // 拿到上下文
       var context = canvas.getContext('2d');
       // 设置线条的颜色
       context.strokeStyle = 'red';
       // 设置线条的宽度
       context.lineWidth = 5;

       // 绘制直线
       context.beginPath();
      // 起点
       context.moveTo(200, 200);
      // 终点
       context.lineTo(500, 200);
       context.closePath();
       context.stroke();
    
   // 绘制弧线
    context.beginPath();
   /*
   * params
   * 圆心x坐标
   * 圆心y坐标
   * 半径
   * 起始角度
   * 结束角度
   * 方向，true 逆时针   false 顺时针  默认false，不写表示false
   */ 
    context.arc(200,200,100,0,Math.PI/2,false);
    context.closePath();
    context.stroke();

    context.strokeStyle = 'red';
    context.arc(200,200,100,0,Math.PI/2, true);
    context.closePath();
    context.stroke();
   </script>

</body>

 

posted @ 2016-09-07 10:55  Colaless  阅读(21652)  评论(1)  编辑  收藏  举报