码迷,mamicode.com
首页 > Web开发 > 详细

js 利用canvas绘制直线、曲线

时间:2016-09-07 12:27:45      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

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

 

js 利用canvas绘制直线、曲线

标签:

原文地址:http://www.cnblogs.com/zhangshan/p/5848613.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!